title: Display none showing up in IE win 10
body: <p>I have an asp page and I created a function where it detects if the user is in Edge. If the user is on edge and a specific link is clicked then the user will get a popup window saying that Edge is not Supported. This is working fine but for some reason, my popup window is displaying at the bottom of the page in IE 11 windows 10. This does not happen on all machines but some. My Modal Div is the last code in my asp page. I'm not sure if this could be a bug in the code or the way IE was set up in those machines, however shouldnt the div be hidden from default. Any feedback is EXTREMELY APPRECIATED.  </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-css lang-css prettyprint-override"><code>        /* The Modal (background) */
  .modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
   -webkit-animation-name: fadeIn; /* Fade in the background */
   -webkit-animation-duration: 0.4s;
   animation-name: fadeIn;
   animation-duration: 0.4s
  }
  
  /* Modal Content */
  .modal-content {
   position: fixed;
   width: 320px;
   height: 250px;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -160px;
   background-color: #fefefe;
  }
  
  /* The Close Button */
  .close {
   color: white;
   float: right;
   font-size: 28px;
   font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
   color: red;
   text-decoration: none;
   cursor: pointer;
  }
  
  .modal-header {
   padding: 2px 10px;
   height: 30px;
   background-color: #000;
   color: white;
  }
  
  .modal-body {
   padding: 2px 10px;
   height: 120px;
  }
  
  .modal-footer {
   padding: 2px 10px;
   height: 0px;
   background-color: #000;
   color: white;
  }
  
  /* Add Animation */
  @-webkit-keyframes slideIn {
   from {bottom: -300px; opacity: 0}
   to {bottom: 0; opacity: 1}
  }
  
  @keyframes slideIn {
   from {bottom: -300px; opacity: 0}
   to {bottom: 0; opacity: 1}
  }
  
  @-webkit-keyframes fadeIn {
   from {opacity: 0}
   to {opacity: 1}
  }
  
  @keyframes fadeIn {
   from {opacity: 0}
   to {opacity: 1}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;% IF varIsEdge = 1 Then %&gt;
           &lt;a title="Login" name="#top" href="#" onclick="document.getElementById('myModal').style.display = 'block';" &gt;&amp;#187; Login&lt;/a&gt;
          &lt;% Else %&gt;
           &lt;a title="Login" name="#top" target="_blank" href="https://yahoo.com"&gt;&amp;#187; Login&lt;/a&gt;
          &lt;% End If %&gt;
  
     
  
        &lt;div class="modal-content" style="border-style: solid; border-width: 1px; padding: 10px;" &gt;
      &lt;span class="close" style="color:#000" title="Close" onclick="document.getElementById('myModal').style.display = 'none';" &gt;&amp;times&lt;/span&gt;
      &lt;div class="modal-body" align="center"  &gt;
      &lt;h3&gt;browser is not supported&lt;/h3&gt;
      &lt;p&gt;To use this, please use Internet Explorer&lt;/p&gt;
      &lt;img src="logo.png" width=100 height=105 /&gt;
      &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>