Question

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

对于HTML，CSS和JS，我是一个相对新手，但我不得不时不时地使用它们。今天我已将Magnific Popup应用到我正在处理的网站上。我特意尝试使用“使用淡入淡出动画打开”动画示例，并根据我的需要对其进行修改。事实上，弹出窗口正在工作，但弹出框本身的div并没有隐藏，尽管有mfp-hide作为它的类。这很奇怪，因为Dreamweaver预览确实隐藏了它，但Chrome没有（我在最新版本的Chrome for 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类什么也没做。这是因为没有正确包括Magnific Popup的CSS。检查这是否也是您的根本原因。您可以包含以下内容：

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

Magnific Popup - 灯箱问题，加上mfp-hide似乎无能为力

1 个答案: