jquery 弹出脚本需要一些调整

Question

我正在尝试使用 js 弹出脚本：Magnific Popup。基本设置运行良好，除了站点标题 (#header) 也出现并在实际弹出窗口中混合，这是不需要的。

我写了一个小的 js 函数，它可以帮助我消失标题，更具体地说是单击弹出链接时的#header id，但缺点是当我退出弹出窗口时标题仍然不可见-向上。

<script type="text/javascript">
    function hide(div) {
        document.getElementById(div).style.display = 'none';
    }
</script>

<p><a class='youtube' href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&amp;wmode=transparent"  onClick="hide('header')">Flash / Video (Iframe/Direct Link To YouTube)</a></p>

请注意onClick="hide('header') 可以解决问题

这是我的设置

<script type="text/javascript">
    $(document).ready(function() {
        //assign the Colorbox event to elements
        $(".youtube").magnificPopup({
            type: 'iframe',
            src: 'http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&amp;wmode=transparent'
        });
    });
</script>

现在，我尝试在延迟几秒钟后加载弹出窗口，但我不知道如何隐藏标题 #header div 并在弹出窗口存在时恢复它。以下脚本有效，但需要进一步调整。我想知道为什么网站标题混淆了，我没有打电话？我一无所知。如果您之前遇到过类似的问题，请投稿。谢谢。

<script type="text/javascript">
    $(window).load(function() {
        setTimeout(function() {
            $.magnificPopup.open({
                items: {
                    src: 'http://vimeo.com/123123',
                    type: 'iframe'
                },
                mainClass: 'youtube'
            });
        }, 10000); 
    });
</script>

这是我的网站标题：

<header class="header" id="header" role="banner">
    <div class="header-inner">
        <div id="menu-btn">
            <a href="#" title="Menu" id="menu-btn-toggle" class="menu-icon-link">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve" id="menu-icon" class="injected-svg svg inject-svg" data-fallback="/sites/all/themes/zeus_base/images/menu-icon.png">
                    <style type="text/css">
                        #menu-icon{fill:#FFFFFF;}
                    </style>
                    <path id="menu-icon" d="M462,163.5H50v-65h412V163.5z M462,223.5H50v65h412V223.5z M462,348.5H50v65h412V348.5z"></path>
                </svg>
            </a>
        </div>
        <div class="logo">
            <a href="/" title="Home" rel="home" class="header__logo" id="logo">
                <img src="http://www.bicycling.com/sites/bicycling.com/themes/bicycling/logo.png" alt="Home" class="header__logo-image">
            </a>
        </div>
        <div class="main-menu">
            <a href="#" class="search-submit">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve" id="search-icon" class="injected-svg svg inject-svg" data-fallback="/sites/all/themes/zeus_base/images/search.png">
                    <path id="magnifier-2-icon" d="M460.355,421.59L353.844,315.078c20.041-27.553,31.885-61.437,31.885-98.037   C385.729,124.934,310.793,50,218.686,50C126.58,50,51.645,124.934,51.645,217.041c0,92.106,74.936,167.041,167.041,167.041   c34.912,0,67.352-10.773,94.184-29.158L419.945,462L460.355,421.59z M100.631,217.041c0-65.096,52.959-118.056,118.055-118.056   c65.098,0,118.057,52.959,118.057,118.056c0,65.096-52.959,118.056-118.057,118.056C153.59,335.097,100.631,282.137,100.631,217.041   z"></path>
                </svg>
            </a>
            <?php
                echo $this->widget("searchbox", "content", array("params" => array("type" => "article")));
            ?>
            <ul id="main-menu" class="links clearfix">
                <li class="menu-16221 first">
                    <a href="/bikes-gear" id="bikesgear-main">Bikes &amp; Gear</a>
                </li>
                <li class="menu-16226">
                    <a href="/rides" id="ride-main">Rides</a>
                </li>
                <li class="menu-16231">
                    <a href="/training" id="trainingnutrition-main">Training</a>
                </li>
                <li class="menu-16241">
                    <a href="http://shop.bicycling.com/" id="culture-main" target="_blank">Shop</a>
                </li>
                <li class="menu-16246 last">
                    <a href="https://offers.rodale.com/offer/600175?keycode=I5LW0D0F&amp;cm_mmc=bicycling.com-_-Nav%20Subscribe-_-BKE%20SwA%20Nav%20Bar%20Nov15-_-OfferID_600175_keycode_I5LW0D0F" id="mainsubscribe" class="subscribe-link" target="_blank">Subscribe</a>
                </li>
            </ul>
        </div>
    </div>
</header>

Answer 1

您正在隐藏标题 onClick()，这听起来像是在工作，但在弹出窗口关闭时，您没有逻辑再次显示它。所以，它仍然是隐藏的。

换句话说，您正在控制“接近”插件激活的事件，但是当插件逻辑接管时您失去了控制（当用户单击“关闭”时，您依赖插件自行关闭） .

这是一个非常常见的问题，因此插件开发人员通常会提供一些可用的钩子或事件，您可以利用它们。

让我们看看API：

$('.image-link').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
    },
    close: function() {
      // Will fire when popup is closed
    }
  }
});

所以在这里，开发者已经包含了一些事件供你使用，你只需要提供几个回调方法来进行隐藏和显示：

<script type="text/javascript">

    function hide(div) {
        document.getElementById(div).style.display = 'none';
    }
    // lets add a show method, like your hide()
    function show(div) {
        document.getElementById(div).style.display = 'block';
    }

</script>

然后你可以在你的设置的回调属性上调用这些方法，有点像这样：

callbacks : {

    open : function(){
        hide('header');
    },
    close : function(){
        show('header');
    }
}

这是一件非常简单的事情，并且有无数种方法可以做到。但是，在这里，您已经购买了一个插件及其功能，所以您不妨使用它为您提供的功能。

看看你能不能让它工作，如果你遇到任何问题，请告诉我。

祝你好运；）

注意：我想知道你为什么隐藏标题？毕竟这是 css，你可能会更好地通过在标题上呈现弹出窗口来获得更好的服务。