无法打开使用JQuery和弹出popup popup的弹出窗口

Question

我已经加载了magnifica popup.js库来显示窗体的弹出窗口。

HTML：

<a class="popup-with-form" href="#test-form">Open form</a> 

<form id="test-form" class="mfp-hide white-popup-block"> 
     <h1>Form</h1> 

    <fieldset style="border:0;"> 
     <p>Lightbox has an option to automatically focus on the first input. It's strongly recommended to use <code>inline</code> popup type for lightboxes with form instead of <code>ajax</code> (to keep entered data if the user accidentally refreshed the page).</p> 
     <ol> 
      <li> 
       <label for="name">Name</label> 
       <input id="name" name="name" type="text" placeholder="Name" required=""> 
      </li> 
      <li> 
       <label for="email">Email</label> 
       <input id="email" name="email" type="email" placeholder="example@domain.com" required=""> 
      </li> 
      <li> 
       <label for="phone">Phone</label> 
       <input id="phone" name="phone" type="tel" placeholder="Eg. +447500000000" required=""> 
      </li> 
      <li> 
       <label for="textarea">Textarea</label> 
       <br> 
       <textarea id="textarea">Try to resize me to see how popup CSS-based resizing works.</textarea> 
      </li> 
     </ol> 
    </fieldset> 
</form> 

JS：

$(document).ready(function() { 
    $('.popup-with-form').magnificPopup({ 
     type: 'inline', 
     preloader: false, 
     focus: '#name', 

     // When elemened is focused, some mobile browsers in some cases zoom in 
     // It looks not nice, so we disable it: 
     callbacks: { 
      beforeOpen: function() { 
       if ($(window).width() < 700) { 
        this.st.focus = false; 
       } else { 
        this.st.focus = '#name'; 
       } 
      } 
     } 
    }); 
}); 

在弹出这是不显示的形式如预期。您可能会看到具有相关性的示例here

Answer 1

放大弹出不会将任何样式应用于弹出窗口。你必须自己动手：http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline_type。如果你想使它看起来像他们的榜样补充：

.white-popup-block { 
    position: relative; 
    background: #FFF; 
    padding: 20px; 
    width: auto; 
    max-width: 500px; 
    margin: 20px auto; 
} 

http://jsfiddle.net/yWpC4/3/