javascript - Magnific Popup - 灯箱问题，加上 mfp-hide 似乎什么都不做

Question

这是我第一次使用stackoverflow，所以请耐心等待，呵呵。

在 HTML、CSS 和 JS 方面，我是一个相对的新手，但我必须时不时地在工作中使用它们。今天我申请了Magnific Popup到我正在处理的网站。我特别尝试使用“使用淡入淡出动画打开”示例，并对其进行修改以满足我的需要。弹出窗口确实有效，但弹出框本身的 div 并没有隐藏，尽管它的类是 mfp-hide。这很奇怪，因为 Dreamweaver 预览确实隐藏了它，但 Chrome 没有(我使用的是最新版本的 Windows 版 Chrome，如果它有帮助的话。)此外，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> block 内)

$(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(位于带 JS 的 style block 正上方的 script block 内)

/* 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 类什么也没做。这是由于没有正确包含 Magnific Popup 的 css 造成的。检查这是否也是您的根本原因。您可以包括以下内容:

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