title: Launch Popup once Page Opens (using Magnific Popup)
body: <p>I am trying to have a popup (about page of the website) once the web is first launch. I am using Magnific popup - modal popup and have a hard time figuring how to do that. The popup works fine, when it is such that the website launches, then the user clicks the "about" button.</p>
  
  <p>I appreciate any help given. Thanks, guys:)</p>
  
  <p>script:</p>
  
  <pre><code>$(function () {
      $('.popup-modal').magnificPopup({
        type: 'inline',
        preloader: false,
        focus: '#username',
        modal: true
      });
      $(document).on('click', '.popup-modal-dismiss', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
      });
  });
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="html-code"&gt;
        &lt;a class="popup-modal" href="#test-modal"&gt;about&lt;/a&gt;
  
        &lt;div id="test-modal" class="mfp-hide white-popup-block"&gt;
          &lt;p&gt;Change the way you think about recipes. Text link interchanges with verbs and nouns of recipes.&lt;/p&gt;
          &lt;p&gt;&lt;a class="popup-modal-dismiss" href="#"&gt;Close&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>css:</p>
  
  <pre><code>.popup-modal{
      text-decoration: none;
      font-weight: bold;
      color:black;
      position:fixed;
      left:0;
      margin-left: 50px;
      bottom:0;
      margin-bottom: 25px;
  }
  
  #test-modal{
      background-color: white;
      padding: 30px 40px;
      text-align:left;
      max-width: 650px;
      margin:40px auto;
      position:relative;
  
      font-size: 15pt;
      line-height: 25pt;
  }
  
  .popup-modal-dismiss{
      text-align: right;
      font-size: 10pt;
      text-decoration: none;
  }
  </code></pre>