title: Javascript: style.display="none" not working whereas style.display="visible" works
body: <p>I am trying to create Modal structure for a product catalog.
  The Modal appears whenever the user clicks on product name.</p>
  
  <p>By default <code>modal class</code> has <code>display="none"</code></p>
  
  <p>The <code>style.display="visible";</code> is executed <code>onclick</code> by calling function <code>show(id);</code></p>
  
  <p>On clicking <code>close(X) icon</code> <code>hide(id);</code> is called but <code>style.display="none";</code> has no effect and modal doesn't hide.</p>
  
  <p><strong>Please answer in simple Javascript only.</strong></p>
  
  <p>Code: <a href="https://jsfiddle.net/abhaygc/zymkv1wq/" rel="noreferrer">https://jsfiddle.net/abhaygc/zymkv1wq/</a></p>
  
  <p>Code Snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;meta charset="utf-8"/&gt;
   &lt;link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'&gt;
   &lt;link rel="stylesheet" type="text/css" href="products.css"&gt;
   &lt;title&gt;Products&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div class="header"&gt;
    &lt;div class="logo"&gt;
     &lt;a href="home.html"&gt;&lt;img id="logo"src="logo.png" alt="LOGO"&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="links"&gt;   
     &lt;a href="home.html"&gt;Home&lt;/a&gt;
     &lt;a href="products.html"&gt;Products&lt;/a&gt;
     &lt;a href="login.html"&gt;Login&lt;/a&gt;
     &lt;a href="register.html"&gt;Register&lt;/a&gt;
     &lt;a href="home.html"&gt;Contact&lt;/a&gt;
     &lt;a href="home.html"&gt;About&lt;/a&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="content"&gt;
    &lt;div class="product-1 product" onclick="show('cns');"&gt;
     &lt;div class="image"&gt;
       &lt;span class="product-title"&gt;CNS&lt;/span&gt;
     &lt;/div&gt;
     &lt;div id="cns" class="modal"&gt;
      &lt;div class="modal-head"&gt;
       CNS
       &lt;span class="close" onclick="hide('cns');"&gt;&amp;times;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
       &lt;ol&gt;
        &lt;li&gt;CNS First Product&lt;/li&gt;
        &lt;li&gt;CNS Second Product&lt;/li&gt;
        &lt;li&gt;CNS Third Product&lt;/li&gt;
        &lt;li&gt;CNS Fourth Product&lt;/li&gt;
       &lt;/ol&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  
    
  
    &lt;div class="product-2 product" onclick="show('laser');"&gt;
     &lt;div class="image"&gt;
       &lt;span class="product-title"&gt;Laser Cut&lt;/span&gt;
     &lt;/div&gt;
     &lt;div id="laser" class="modal"&gt;
      &lt;div class="modal-head"&gt;
       Laser Cut
       &lt;span class="close" onclick="hide('laser');"&gt;&amp;times;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
       &lt;ol&gt;
        &lt;li&gt;Laser First Product&lt;/li&gt;
        &lt;li&gt;Laser Second Product&lt;/li&gt;
        &lt;li&gt;Laser Third Product&lt;/li&gt;
        &lt;li&gt;Laser Fourth Product&lt;/li&gt;
       &lt;/ol&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="clear"&gt;&lt;/div&gt;
  
    &lt;div class="product-1 product" onclick="show('rubber');"&gt;
     &lt;div class="image"&gt;
       &lt;span class="product-title"&gt;Rubber roller&lt;/span&gt;
     &lt;/div&gt;
     &lt;div id="rubber" class="modal"&gt;
      &lt;div class="modal-head"&gt;
       Rubber roller
       &lt;span class="close" onclick="hide('rubber');"&gt;&amp;times;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
       &lt;ol&gt;
        &lt;li&gt;Rubber First Product&lt;/li&gt;
        &lt;li&gt;Rubber Second Product&lt;/li&gt;
        &lt;li&gt;Rubber Third Product&lt;/li&gt;
        &lt;li&gt;Rubber Fourth Product&lt;/li&gt;
       &lt;/ol&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="product-2 product" onclick="show('fixture');"&gt;
     &lt;div class="image"&gt;
       &lt;span class="product-title"&gt;Fixture&lt;/span&gt;
     &lt;/div&gt;
     &lt;div id="fixture" class="modal"&gt;
      &lt;div class="modal-head"&gt;
       Fixture
       &lt;span class="close" onclick="hide('fixture');"&gt;&amp;times;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
       &lt;ol&gt;
        &lt;li&gt;Fixture First Product&lt;/li&gt;
        &lt;li&gt;Fixture Second Product&lt;/li&gt;
        &lt;li&gt;Fixture Third Product&lt;/li&gt;
        &lt;li&gt;Fixture Fourth Product&lt;/li&gt;
       &lt;/ol&gt;
      &lt;/div&gt; 
     &lt;/div&gt;
    &lt;/div&gt;
  
   &lt;/div&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript" src="products.js"&gt;&lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>