Блог

Главная - Вопросы по программированию - Модальный диалог. — Сбивает с толку

Модальный диалог. — Сбивает с толку

#magnific-popup

#увеличительное всплывающее окно

Вопрос:

Я пытаюсь открыть простой модальный диалог, и я изо всех сил пытался это сделать. Может

кто-нибудь, пожалуйста, помогите? Это HTML-код (пожалуйста, удалите pre). Это просто не работает.

Может кто-нибудь, пожалуйста, скажите ** сильный текст ** мне, почему? Я не получал тот результат, который мне действительно нужен.

Кто-нибудь мне поможет.

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/magnific-popup.css" rel="stylesheet" />
    <script src="js/jquery.magnific-popup.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
</head>
<body>


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

<div id="test-modal" class="white-popup-block mfp-hide">
    <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>


    <script>

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

    </script>

</body>
</html>

Ответ №1:

Загрузите jquery перед плагином magnific-popup, он основан на jquery (я никогда его не использовал, но я предполагаю, что это так, поскольку он предварительно добавлен с фиксированным ‘jquery’)

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/magnific-popup.css" rel="stylesheet" />
    <!-- Jquery loaded first here... -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
    <!-- Plugins after... -->
    <script src="js/jquery.magnific-popup.js"></script>

</head>
<body>