title: How to always show up pure HTML5/CSS modal window without clicking a link which activates it?
body: <p>I have a pure HTML5/CSS modal window inside Razor View <code>UserPanel</code> in ASP.NET MVC application. I can activate this modal window by clicking a link: <code>&lt;p&gt;&lt;a href="#modal" class="btn go"&gt;Activate Modal&lt;/a&gt;&lt;/p&gt;</code>the problem is I want it to be displayed always when visiting <code>/UserPanel</code> page and don't have to click on this button.</p>
  
  <p>The short html and then full css for the modal(it works - > the modal shows up only after clicking the button):</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;p&gt;&lt;a href="#modal" class="btn go"&gt;Activate Modal&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="modal"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="header"&gt;
              &lt;h2&gt;Notification&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="copy"&gt;
              &lt;p&gt;There is new Announcment to read!&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="cf footer"&gt;
              &lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>&lt;style&gt;
      #modal {
          left: 50%;
          margin: -250px 0 0 -40%;
          opacity: 0;
          position: absolute;
          top: -50%;
          visibility: hidden;
          width: 80%;
          box-shadow: 0 3px 7px rgba(0,0,0,.25);
          box-sizing: border-box;
          transition: all 0.4s ease-in-out;
          -moz-transition: all 0.4s ease-in-out;
          -webkit-transition: all 0.4s ease-in-out;
      }
  
          #modal:target {
              opacity: 1;
              top: 50%;
              visibility: visible;
          }
  
          #modal .header, #modal .footer {
              border-bottom: 1px solid #e7e7e7;
              border-radius: 5px 5px 0 0;
          }
  
          #modal .footer {
              border: none;
              border-top: 1px solid #e7e7e7;
              border-radius: 0 0 5px 5px;
          }
  
          #modal h2 {
              margin: 0;
          }
  
          #modal .btn {
              float: right;
          }
  
          #modal .copy, #modal .header, #modal .footer {
              padding: 15px;
          }
  
      .modal-content {
          background: #f7f7f7;
          position: relative;
          z-index: 20;
          border-radius: 5px;
      }
  
      #modal .copy {
          background: #fff;
      }
  
      #modal .overlay {
          background-color: #000;
          background: rgba(0,0,0,.5);
          height: 100%;
          left: 0;
          position: fixed;
          top: 0;
          width: 100%;
          z-index: 10;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>Question: How to always show modal when visiting this page?</p>