title: HTML5 Modal Dialog is showing shortly on page load, how can i stop this?
body: <p>I've added an HTML5 modal dialog box to login, it can be "opened" after clicking on a link. </p>
  
  <p>But when I load my page, I can see the dialog box shortly which was not my intention.</p>
  
  <p>How can I stop it from "loading" at the page load?</p>
  
  <p>Thanks in advance,</p>
  
  <p>link to webpage: <a href="http://www.solar-sell.eu/" rel="nofollow">http://www.solar-sell.eu/</a></p>
  
  <p>(the button to display the modal dialog is in the bottom right corner)</p>
  
  <p>Kind Regards,</p>
  
  <p>jdank</p>
  
  <p>Code from where it is loading:</p>
  
  <pre><code>&lt;a href="#openModal" class="modallink"&gt;&lt;div class="mijnsolarsell"&gt;&lt;/div&gt;&lt;/a&gt;
  
  &lt;div id="openModal" class="modalDialog"&gt;
      &lt;div&gt;
          &lt;a href="#close" title="Venster sluiten" class="close"&gt;X&lt;/a&gt;
          &lt;h2&gt;Mijn Solar Sell - Inloggen&lt;/h2&gt;
          &lt;form method="POST" action="http://www.solar-sell.eu/"&gt;
              &lt;input class="inputinlognaam" type="text" name="username" size="15" /&gt;
              &lt;input class="inputwachtwoord" type="password" name="password" size="15" /&gt;
              &lt;input class="inlogbutton" value="" type="submit" /&gt;
          &lt;/form&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>.modalDialog {
      position: fixed;
      font-family: Arial, Helvetica, sans-serif;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0,0,0,0.8);
      z-index: 99999;
      opacity:0;
      -webkit-transition: opacity 400ms ease-in;
      -moz-transition: opacity 400ms ease-in;
      transition: opacity 400ms ease-in;
      pointer-events: none;
  }
  </code></pre>