Can't open popup using JQuery and magnific popup.js

Question

I've loaded magnific popup.js library to display a popup for a form.

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';
                }
            }
        }
    });
});

This isn't displaying the form in a popup as expected. You may see the example with dependencies here

Answer 1

Magnific popup doesn't apply any styles to the popup. You have to do it yourself: http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline_type . If you want to make it look like their example add:

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

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