嗨,我想知道在显示弹出窗口时是否可以隐藏html内容。(我正在使用放大弹出窗口)。我有一个按钮,调用这个弹出显示。当然,当弹出窗口关闭时,导航内容将再次显示。
用于隐藏和显示的Nav代码
<nav class="top-nav">
<ul>
<li><a href="">A link</a></li>
<li><a href="">A link</a></li>
</ul>
</nav>
调用弹出的按钮
<a href="#register-popup" class="open-popup-link">Call popup</span></a>
弹出代码
<div id="register-popup" class="white-popup mfp-hide">
<div class="container">
<p>some content</p>
</div>
</div>
非常感谢您的帮助:)
解决方案
您可以通过Magnific插件的打开回调隐藏顶部导航。您也可以使用关闭回调来再次显示它。
$('#register-popup').magnificPopup({
callbacks: {
open: function() {
$('.top-nav').hide();
}
close: function() {
$('.top-nav').show();
}
}
});
放大弹出窗口接受打开和关闭事件的回调。
$('.selector').magnificPopup({
// you may add other options here, e.g.:
preloader: true,
callbacks: {
open: function() {
// Will fire when this exact popup is opened
// this - is Magnific Popup object
$('.top-nav').hide();
},
close: function() {
// Will fire when popup is closed
$('.top-nav').show();
}
// e.t.c.
}
});
有关放大弹出的更多信息,请查看API文档:
http://dimsemenov.com/plugins/magnific-popup/documentation.html
you can use those API methodes :
$('#register-popup').magnificPopup({
// you may add other options here, e.g.:
preloader: true,
callbacks: {
open: function() {
// Will fire when this exact popup is opened
},
close: function() {
// Will fire when popup is closed
}
// e.t.c.
}
});
当放大弹出菜单处于活动状态时,会在主体中添加类mfp缩小cur。如果要隐藏任何内容,请使用该类来定位布局中要隐藏的内容。不需要额外的JavaScript。
.mfp-zoom-out-cur .top-nav {
display:none;
visibility:hidden;
}