title: HTML Popup not displaying
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)"&gt;
      &lt;meta name="dcterms.created" content="Sun, 12 Feb 2017 03:36:45 GMT"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="keywords" content=""&gt;
      &lt;title&gt;&lt;/title&gt;
      
      &lt;!--[if IE]&gt;
      &lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
       &lt;style&gt;
       
            form {
              max-width: 500px;
              margin: 10px auto;
              padding: 10px 10px;
              background: #fff;
              color: #071b51;
              border: 1px #071b51;
              border-radius: 8px;
            }
          
           .loginpopup:hover {
             background-color: #071b51;
             color: #fff;
             }
          
           /*hover on span*/
          .popuptext:hover {
             pointer-events: auto;
            }
            
            
          .show {
              visibility: visible;
          }
          
          .loginpopup {
                position: relative;
              display: inline-block;
              cursor:pointer;
              -webkit-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
           padding: 19px 39px 18px 39px;
            background-color: #071b51;
            font-size: 18px;
            text-align: center;
            font-style: normal;
            border-radius: 10px;
            border: 1px solid #072583;
            border-width: 1px 1px 3px;
            border-color: #fff;
            box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
            margin-bottom: 10px;
            color:#fff;
             
           }
          
           .popuptext {
              visibility:hidden;
            width: 400px;
              background-color: #fff;
              color: #071b51;
              text-align: center;
              border-radius: 6px;
              padding: 10px 10px;
              position: absolute;
              z-index: 1;
              bottom: -1000%;
              left: 0%;
              margin-left: -500px;
            }
           &lt;/style&gt;
   
  &lt;/head&gt;
    &lt;body&gt;
    
    &lt;div id="loginbutton" class="loginpopup" onclick="openPopup(); "style="font-family: sans-serif; width: 150px; left: 310px; height: 60px; top: 0px;"&gt;Login&lt;/div&gt;
  
        &lt;span id="myPopup" class="popuptext" style="border: solid 10px #071b51;"&gt;
     
         &lt;form&gt;
            &lt;h1&gt;Login&lt;/h1&gt;
          
                    &lt;fieldset&gt;
            
                                    &lt;label for="mail"&gt;Email:&lt;/label&gt;
                                    &lt;input type="email" id="mail" name="user_email" style="border:solid 1px #071b51; border-radius: 5px;"&gt;
                                    
                                    &lt;label for="password"&gt;Password:&lt;/label&gt;
                                    &lt;input type="password" id="password" name="user_password" style="border:solid 1px #071b51; border-radius: 5px;"&gt;
                                  &lt;/fieldset&gt;
                  &lt;button type="submit"&gt;Login&lt;/button&gt;
  
     &lt;/form&gt;
      &lt;/span&gt;
  
  
  
  
   &lt;!--JS for all actions on main page--&gt;
    &lt;script&gt; 
    //open myPopup  
   function openPopup() {
      var popup1 = document.getElementById("myPopup");
         popup1.classList.toggle("show");
   } 
   
   &lt;/script&gt; 
  
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can someone help me figure out the problem with this? Initially, "myPopup"'s visibility attribute is set to "hidden". Later, when "loginbutton" is clicked (onclick() ), the function "openPopup()" is called which sets "myPopup"'s visibility attribute is set to "visible" via the class "show". However, "myPopup" remains hidden. Is there something I've overlooked? Thanks</p>