Question

您好我想知道在显示弹出窗口时是否可以隐藏html内容。（我正在使用Magnific-popup）。我有一个按钮，可以显示这个弹出窗口。当然，当弹出窗口关闭时，导航内容将再次显示。

导航代码以隐藏和显示

<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>

非常感谢你的帮助：）

Answer 1

<强>解决方案

您可以通过Magnific插件的开放回调隐藏top-nav。您也可以使用close回调再次显示它。

    $('#register-popup').magnificPopup({
        callbacks: {
            open: function() {
                $('.top-nav').hide();
            }
            close: function() {
                $('.top-nav').show();
            }
        }
    });

Answer 2

Magnific-popup接受开启和关闭事件的回调。

$('.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.
  }
});

有关更多信息，请访问Magnific-popup，查看API文档：

http://dimsemenov.com/plugins/magnific-popup/documentation.html

Answer 3

  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.
}
});

Answer 4

当Magnific Popup处于活动状态时，类.mfp-zoom-out-cur将添加到正文中。如果要隐藏任何内容，请使用该类来定位要在布局中隐藏的内容。无需额外的JavaScript。

.mfp-zoom-out-cur .top-nav {
    display:none;
    visibility:hidden;
}

显示Magnific-popup时隐藏导航内容

4 个答案: