显示放大镜弹出窗口时隐藏导航内容

Hide nav content when Magnific-popup is shown

本文关键字：隐藏 导航 窗口 放大镜 显示      更新时间：2023-09-26

嗨，我想知道在显示弹出窗口时是否可以隐藏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;
}
相关文章：