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

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

默认情况下，modal class具有display="none"

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

单击时close(X) iconhide(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>

这是因为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"

我已经在小提琴中更新了它，您可能需要检查一下： https://jsfiddle.net/zymkv1wq/28/

关键在于这些行。

<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 id="cns" class="modal">放在这个div<div class="product-1 product" onclick="show('cns');">里面，上面有一个onclick回调。

所以基本上，当cms模态出现并单击关闭按钮时，您也单击父div。这迫使它再次显示。试试这个，我只更改cns;

<div class="product-1 product">
<div class="image" onclick="show('cns');">
<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>

请注意，show()现在位于类image上。

如果要调试以前的代码，请尝试将console.log('something')也放在JS文件中show()中。当您打开模态并单击close按钮时，您还将看到来自show()的日志

相关内容

最新更新

热门标签：