Question

我已尝试过此代码，但延迟无法正常工作，我希望在用户访问我的网站30-40秒后显示此弹出窗口，但它会在加载后立即打开。

这是代码：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='http://aireshalili.github.io/internetsmash/facebook-popup-box.js' type='text/javascript'></script>

<div id="fb-root"></div>
<script>
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=124246297655999&version=v2.3";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>
<style>
    #popup-facebook{
      display:block;
      background:rgba(0,0,0,0.5);
      width:100%;
      height:100%;
      position:fixed;
      top:0; right:0; bottom:0; left:0;
      z-index:99999999
    }
    #popup-facebook .popup-box { 
      padding:.4em 1em; 
      position: relative;
      border-radius:.3em;
      border: 1px solid #000; 
      margin: 0 auto;
      max-width: 400px;
      z-index: 0;
      top: 25%;background: #FFFFFF;
    }
    #popup-facebook .popup-box .exit-button:before { 
      content: "X"; 
      position: absolute; 
      top: -10px; right: -10px; 
      background: #fff; 
      font: bold 16px Arial, Sans-Serif; 
      text-decoration: none; 
      line-height: 22px; 
      width: 22px; 
      text-align: center; 
      color: #000000; 
      border: 2px solid #464646; 
      -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.4); 
      -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.4); 
      box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
      -webkit-border-radius: 22px;
      -moz-border-radius: 22px;
      border-radius: 25px;
      cursor: pointer;
    }
    #follow-us{
      font-size: 1.7em;
      color: #010069;
    }
</style>
<script type='text/javascript'>
    jQuery(document).ready(function($){
      if($.cookie('popup_facebook_box')!='yes'){
        $('#popup-facebook').delay(40000).fadeIn('medium');
        $('.exit-button').click(function(){
          $('#popup-facebook').stop().fadeOut('slow')
        })
      }
      $.cookie('popup_facebook_box','yes',{path:'/',expires:1})
    });
</script>
<div id='popup-facebook'>
    <div class='popup-box'>
        <div id='follow-us'>Follow us on Facebook</div>
        <div class='exit-button'></div>
        <div style='overflow: hidden !important;'>
           <div class="fb-page" data-href="https://www.facebook.com/gotripper" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false">
               <div class="fb-xfbml-parse-ignore">
                   <blockquote cite="https://www.facebook.com/gotripper">
                       <a href="https://www.facebook.com/gotripper">Gotripperz.com</a>
                   </blockquote>
               </div>
           </div>
       </div>
    </div>
</div>

Answer 1

我在这个jsfiddle中使用setTimeout()，取得了一些成功：https://jsfiddle.net/pfnLL7z6/

关键方面是最初将#popup-facebook的显示设置为none，然后fadeIn正常工作。

#popup-facebook{
  display:none;
  ...
  ...
}

（因为它掩盖了真正的问题，我摆脱了小提琴中的饼干）

**

更新

**

我把你的delay功能重新放入 - 它工作正常。 https://jsfiddle.net/pfnLL7z6/1/

Jquery Delay在这段代码中不起作用，我尝试过很多东西

1 个答案:

更新