Magnific Popup - 灯箱问题，加上 mfp-hide 似乎什么也没做答案

【问题标题】：Magnific Popup - lightbox issue, plus mfp-hide seems to do nothingMagnific Popup - 灯箱问题，加上 mfp-hide 似乎什么也没做
【发布时间】：2015-10-27 18:07:24
【问题描述】：

这是我第一次使用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（位于我的 </body> 标签之前的 script 块内）

$(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 的 script 块正上方的 style 块内）

/* 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;
}

这就是我所拥有的。很抱歉，如果这个问题已经回答了，我还没有找到它。让我知道我是否可以提供其他任何东西来帮助解决问题。并提前感谢您的阅读。干杯。

【问题讨论】：

标签： javascript jquery html css magnific-popup

【解决方案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">

【讨论】：