Magnific Popup - проблема с лайтбоксом, плюс mfp-hide, похоже, ничего не делает

Question

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

Я относительный новичок, когда дело доходит до HTML, CSS и JS, но я должен время от времени использовать их для работы. Сегодня я применил Magnific Popup к сайту, над которым я работаю. Я специально пытаюсь использовать пример "Open with fade-zoom animation" и изменить его, чтобы он соответствовал моим потребностям. Действительно, всплывающее окно работает, но div для самого всплывающего окна не скрывается, несмотря на то, что его классом является mfp-hide. Это странно, потому что предварительный просмотр Dreamweaver действительно скрывает это, но Chrome этого не делает (я использую последнюю версию Chrome для Windows, если это помогает.) Кроме того, лайтбокса, отображаемого сайтом Magnific Popup за каждым всплывающим окном, нигде не видно.

Вот jsfiddle с моим кодом. Интерфейс публикации говорит, что мне нужно опубликовать свой код здесь, так что вот оно:

Вот мой HTML:

<div>
    <a class="popup-with-zoom-anim" href="#dialog">
        <span>CLICK HERE TO DISPLAY DIALOG</span>
    </a>
</div>

<div id="dialog" class="zoom-anim-dialog mfp-hide">
    <h1>DIALOG TITLE</h1>
    <br><br>
    <p>Dialog text</p>
</div>

Мой JS (находится внутри script блокировать прямо перед моим </body> тег)

$(document).ready(function() {
    $('.popup-with-zoom-anim').magnificPopup({
        type: 'inline',
        fixedContentPos: false,
        fixedBgPos: true,
        overflowY: 'auto',
        closeBtnInside: true,
        preloader: false,
        midClick: true,
        removalDelay: 300,
        mainClass: 'my-mfp-zoom-in'
    });
});

И на всякий случай, мой CSS (находится внутри style блокировать прямо над script блок с JS)

/* Styles for dialog window */
#dialog {
background: white;
padding: 20px 30px;
text-align: left;
max-width: 700px;
position: relative;
box-shadow: 1px 1px 10px 5px rgba(0,0,0,0.25);
left: 50%;
right: 50%;
z-index: 999;
top: 100px
}

/**
* Fade-zoom animation
*/

/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
display:block;
opacity: 0;

-webkit-transition: all 0.2s ease-in-out; 
-moz-transition: all 0.2s ease-in-out; 
-o-transition: all 0.2s ease-in-out; 
transition: all 0.2s ease-in-out; 

-webkit-transform: scale(0.8); 
-moz-transform: scale(0.8); 
-ms-transform: scale(0.8); 
-o-transform: scale(0.8); 
transform: scale(0.8); 
}

/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
opacity: 1;

-webkit-transform: scale(1); 
-moz-transform: scale(1); 
-ms-transform: scale(1); 
-o-transform: scale(1); 
transform: scale(1); 
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
-webkit-transform: scale(0.8); 
-moz-transform: scale(0.8); 
-ms-transform: scale(0.8); 
-o-transform: scale(0.8); 
transform: scale(0.8); 

opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
opacity: 0;
-webkit-transition: opacity 0.3s ease-out; 
-moz-transition: opacity 0.3s ease-out; 
-o-transition: opacity 0.3s ease-out; 
transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}

Это все, что у меня есть. Извините, если на этот вопрос уже дан ответ, я не смог его найти. Дайте мне знать, если есть что-то еще, что я могу предоставить, чтобы помочь решить проблему. И спасибо заранее за чтение. Приветствия.

Answer 1

У меня была похожая проблема, когда класс mfp-hide ничего не делал. Это было вызвано неправильным включением CSS Magnific Popup. Проверьте, не является ли это вашей основной причиной. Вы можете включить следующее:

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.1/magnific-popup.min.css" rel="stylesheet">