html - Javascript: style.display="none" not working whereas style.display="visible" works -

I am trying to create Modal structure for a product catalog. The Modal appears whenever the user clicks on product name.

By default modal class has display="none"

The style.display="visible"; is executed onclick by calling function show(id);

On clicking close(X) icon hide(id); is called but style.display="none"; has no effect and modal doesn't hide.

Please answer in simple Javascript only.

Code: /

Code Snippet:

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='' 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>

I am trying to create Modal structure for a product catalog. The Modal appears whenever the user clicks on product name.

By default modal class has display="none"

The style.display="visible"; is executed onclick by calling function show(id);

On clicking close(X) icon hide(id); is called but style.display="none"; has no effect and modal doesn't hide.

Please answer in simple Javascript only.

Code: https://jsfiddle/abhaygc/zymkv1wq/

Code Snippet:

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./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>

Share Improve this question asked Aug 19, 2018 at 15:38 Abhay 5263 gold badges13 silver badges30 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

It happens because of event bubbling.

It means that when you click on the 'X' button, the onclick="hide('cns')" is called and the display property is set to none.

Then the event bubbles up to the product element which in turn calls its own onclick method. And that causes the modal to appear again.

You could stop the event propagation by changing the current onclick to

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

Or you could move the modal outside of the product element:

<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>

To see that the display property is actually changed and then changed back, you could do the following:

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"

i've updated it in fiddle, you may want to check it: https://jsfiddle/zymkv1wq/28/

the key is in these lines.

<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>

do you see? you put your <div id="cns" class="modal"> inside this div <div class="product-1 product" onclick="show('cns');"> which has an onclick callback on it.

so basically, when the cms modal shows up and you click the close button, you click the parent div too. which is forcing it to show again. try this, i only change the cns one;

<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>

notice that the show() is now on class image.

if you want to debug your previous code, try to put console.log('something') inside show() in your JS file too. when you open ur modal, and click close button, you gonna see log from show() too

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Javascript: style.display="none" not working whereas style.display="visible" works -

2 Answers 2

与本文相关的文章

评论列表(0)