时间戳

首页 > 解决方案 > Javascript：style.display="none" 不起作用，而 style.display="visible" 起作用

javascript - Javascript：style.display="none" 不起作用，而 style.display="visible" 起作用

问题描述

我正在尝试为产品目录创建模态结构。每当用户点击产品名称时，Modal 就会出现。

默认modal class有display="none"

通过调用函数style.display="visible";执行onclickshow(id);

单击时close(X) icon hide(id);调用但style.display="none";没有效果，并且模态不会隐藏。

请仅用简单的 Javascript 回答。

代码：https ://jsfiddle.net/abhaygc/zymkv1wq/

代码片段：

function show(id) {
	var modal = document.getElementById(id);
	modal.style.display="block";
}
function hide(id){
	var close = document.getElementById(id);
	console.log("It's here.");
	close.style.display="none";
}
body{
		height: 100vh;
		margin: 0px;
		overflow-y: scroll;
	}
.header{

		background-color: white;
		height:8%;
		overflow: hidden;
		font-style: "Roboto";
		font-size: 25px;
		border-bottom: 2px solid;
		border-bottom-color: #cccccc;
}
#clear{
 	clear: both;
 }
.logo{
	margin-top: 12px;
	float: left;
	left: 0px;
	padding-right: 50px;
}
#logo:hover{
	background: transparent;
}
.links{
	display: block;
	float: right;
	margin-right: 10px;
	margin-top: 10px;
}
a{
	position: relative;
	right: 0px;
	/*top: 25px;*/

	padding-left: 10px;
	padding-right: 10px;

	color:black;
	letter-spacing: 2px;
	font-weight: 200;
	text-decoration: none;
}
a:hover{
	background-color:#cccccc; 
}

.content{
	display: block;
	background-color: white;
	height: 92%;
	margin-top: 0px;
	font-family: 'Roboto';

}

#clear{
	clear: both;
}

.image{
	display: block;
	cursor: pointer;
	width: 300px;
	height: 150px;

	background-color: #cccccc;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);

	overflow: hidden;
}

.product-1{
	display: block;
	position: relative;
	
	padding-left: 20%;
	padding-right: 0%;
	
	
	margin-top: 5%;
	
	float: left;
	left: 0px;
	width: 50%;
	overflow: hidden;

	box-sizing: border-box;
	border-style: none;
	border-color: black;
	border-width: 1px;
}

.product-2{
	display: block;
	position: relative;


	padding-left: 10%;
	padding-right: 0%;

	
	margin-top: 5%;
	
	float: right;

	right:0px;
	
	/*
	float: left; /*Q1
	left: 25px;
	*/
	
	width: 50%;
	overflow: hidden;

	box-sizing: border-box;
	border-style: none;
	border-color: black;
	border-width: 1px;
}

.product-title{
	display: block;
	
	text-align: center;

	margin-top: 50px;

	color:rgb(26, 115, 232);

	font-size: 50px;
}

.modal{
	display: none;
	position: fixed;
	left: 0px;
	right: 0px;
	top: 0px;
	z-index: 1;
	background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
    color:black;
    /*color:rgb(26, 115, 232);*/
    width: 100%;
    height: 100%;
}
.modal-body{
	display: block;
	position: relative;
	left: 35%;
	top: 10%;
	font-size: 45px;
}

.close{
	display: block;
	cursor: pointer;
	float: right;
	right: 10px;
	font-size: 60px;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
	<link rel="stylesheet" type="text/css" href="products.css">
	<title>Products</title>
</head>
<body>
	<div class="header">
		<div class="logo">
			<a href="home.html"><img id="logo"src="logo.png" alt="LOGO"></a>
		</div>
		<div class="links">			
			<a href="home.html">Home</a>
			<a href="products.html">Products</a>
			<a href="login.html">Login</a>
			<a href="register.html">Register</a>
			<a href="home.html">Contact</a>
			<a href="home.html">About</a>
		</div>
	</div>
	<div class="content">
		<div class="product-1 product" onclick="show('cns');">
			<div class="image">
					<span class="product-title">CNS</span>
			</div>
			<div id="cns" class="modal">
				<div class="modal-head">
					CNS
					<span class="close" onclick="hide('cns');">&times;</span>
				</div>
				<div class="modal-body">
					<ol>
						<li>CNS First Product</li>
						<li>CNS Second Product</li>
						<li>CNS Third Product</li>
						<li>CNS Fourth Product</li>
					</ol>
				</div>
			</div>
		</div>

		

		<div class="product-2 product" onclick="show('laser');">
			<div class="image">
					<span class="product-title">Laser Cut</span>
			</div>
			<div id="laser" class="modal">
				<div class="modal-head">
					Laser Cut
					<span class="close" onclick="hide('laser');">&times;</span>
				</div>
				<div class="modal-body">
					<ol>
						<li>Laser First Product</li>
						<li>Laser Second Product</li>
						<li>Laser Third Product</li>
						<li>Laser Fourth Product</li>
					</ol>
				</div>
			</div>
		</div>

		<div id="clear"></div>

		<div class="product-1 product" onclick="show('rubber');">
			<div class="image">
					<span class="product-title">Rubber roller</span>
			</div>
			<div id="rubber" class="modal">
				<div class="modal-head">
					Rubber roller
					<span class="close" onclick="hide('rubber');">&times;</span>
				</div>
				<div class="modal-body">
					<ol>
						<li>Rubber First Product</li>
						<li>Rubber Second Product</li>
						<li>Rubber Third Product</li>
						<li>Rubber Fourth Product</li>
					</ol>
				</div>
			</div>
		</div>

		<div class="product-2 product" onclick="show('fixture');">
			<div class="image">
					<span class="product-title">Fixture</span>
			</div>
			<div id="fixture" class="modal">
				<div class="modal-head">
					Fixture
					<span class="close" onclick="hide('fixture');">&times;</span>
				</div>
				<div class="modal-body">
					<ol>
						<li>Fixture First Product</li>
						<li>Fixture Second Product</li>
						<li>Fixture Third Product</li>
						<li>Fixture Fourth Product</li>
					</ol>
				</div>	
			</div>
		</div>

	</div>
</body>
<script type="text/javascript" src="products.js"></script>
</html>

标签： javascripthtmlcssmodal-dialogdisplay

解决方案

它的发生是因为event bubbling.

这意味着当您单击“X”按钮时，将onclick="hide('cns')"调用 并将显示属性设置为none。

然后事件冒泡到product元素，该元素又调用自己的onclick方法。这导致模态再次出现。

onclick您可以通过将电流更改为来停止事件传播

onclick="hide('cns');event.stopPropagation()"

或者您可以将模态移到product元素之外：

<div class="product-1 product" onclick="show('cns');">
  <div class="image">
    <span class="product-title">CNS</span>
  </div>
</div>

<div id="cns" class="modal">
  <div class="modal-head">
    CNS
    <span class="close" onclick="hide('cns');">&times;</span>
  </div>
  <div class="modal-body">
    <ol>
      <li>CNS First Product</li>
      <li>CNS Second Product</li>
      <li>CNS Third Product</li>
      <li>CNS Fourth Product</li>
    </ol>
  </div>
</div>

要查看显示属性实际上已更改然后又更改回来，您可以执行以下操作：

function hide(id) {
  var close = document.getElementById(id);
  close.style.display="none";
  console.log(close.style.display);
  setTimeout(() => {console.log(close.style.display);});
}

# would print:
"none"
"block"

推荐阅读