Javascript：style.display =“ none”不起作用，而style.display =“ visible”有效

时间：2018-08-19 15:38:43

标签： javascript html css modal-dialog display

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

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

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

点击close(X) icon会调用hide(id);，但style.display="none";无效，模式不会隐藏。

请仅使用简单的Java脚本回答。

代码：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>

2 个答案:

答案 0 :(得分：1)

发生这种情况的原因是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"

答案 1 :(得分：1)

我已经更新了小提琴，您可能需要检查一下： 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');">内，该div上有一个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()的日志

相关问题
最新问题