javascript - 壮大なポップアップを使用してモーダルポップアップを開始できません

Question

Magnific Popup のドキュメントを読み、ファイルを含め、次の JsFiddleに従ってモーダル ポップアップからコードをコピーして貼り付けました。

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

<div id="test-modal" class="mfp-hide white-popup-block">
        <h1>Modal dialog</h1>

    <p>You won't be able to dismiss this by usual means (escape or click button), but you can close it programatically based on user choices or actions.</p>
    <p><a class="popup-modal-dismiss" href="#">Dismiss</a>
    </p>
</div>

$(document).ready(function () {
    $('.popup-modal').magnificPopup({
        type: 'inline',
        preloader: false,
        focus: '#username',
        modal: true
    });
    $(document).on('click', '.popup-modal-dismiss', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
    });
});

しかし、これはまったく機能していません。上記のコードの何が問題なのですか?

Answer 1

JsFiddle に外部から読み込まれた CSS に問題がある可能性があります。外部から読み込まれた css を削除して、コンテンツを CSS タブに貼り付けてみてください。