可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Hi I'm using the fancybox inline pop-up to to alert a view to a promotion. The code I'm using for this is:

$(document).ready(function() {
  $("#various1").fancybox();
});

How would I modify this so it automaticly popped up after, say, 20 seconds? But once it's been closed it schouldn't pop up again.

回答1:

Actually, none of the solutions posted previously work in real life, why? because the line:

$("#various1").fancybox();

doesn't trigger fancybox, it just binds fancybox to the selector #various1, but it still needs a click to trigger the modal/lightbox (not a popup). BTW, Gearóid's solution has syntax errors anyway. The only real value is that they suggest the use of the jQuery cookie plugin (old site).

EDIT: (March 07, 2012) The jQuery cookie plugin home page moved here.

Steps for a working solution:

A) Load the jQuery cookie plugin (as suggested) after jQuery and fancybox js files

B) Then use this script:

<script type="text/javascript">
function openFancybox() {
    setTimeout( function() {$('#various1').trigger('click'); },20000);
}
$(document).ready(function() {
    var visited = $.cookie('visited');
    if (visited == 'yes') {
        return false;
    } else {
        openFancybox();
    }
    $.cookie('visited', 'yes', { expires: 7 });
    $('#various1').fancybox();
});
</script>

C) you still need to have somewhere in your html code (maybe hidden)

<a id="various1" href="path/target"></a>

or for inline content

<a id="various1" href="#target"></a>
<div style="display: none;">
 <div id="target">message to display in fancybox</div>
</div>

Also, if you use inline content and fancybox v1.3.x, check for an existing bug and workaround here

PS. fancybox is not a popup but a modal/lightbox jQuery plugin, which is a non-intrusive solution like jGrowl from a UI point of view.

回答2:

$(document).ready(function() {
  setTimeout(function () {
    $("#various1").fancybox();
  }, 20000);
});

回答3:

Use Timeout function. The solution for your query is below
$(document).ready(function () {
setTimeout(function() {
$('your modal id').modal('show')  }, 10000); //displays modal after 10 seconds
});

回答4:

You should be able to use the delay function for this:

$("#various1").delay(20000).fancybox();

回答5:

You should use setTimeout to delay the popup like so:

setTimeout("showPopup()",20000);

function showPopup() {
    if (null != $.cookie("offer_closed"))
         $("#various1").fancybox();});
}

The use the jQuery cookie library to set a cookie (call it something like "offer_closed") to true when the user clicks close. This then signals that the popup was already displayed.

PS. From a UI point of view, you should try to avoid solutions using popups. Users hate them. Try a more elegant solution like jGrowl.

回答6:

You can use the setTimeout function in javascript:

setTimeout(function() {
    // first wait 20 seconds before this popups
    $("#various1").fancybox();

    setTimeout(function() {
        //.. what to do after 10 seconds
    }, 10000);

}, 20000);

I hope this is what you want? Your title and explanation is confusing

回答7:

See the below code example, popup will open after 5 seconds on page load with a message "Welcome to site name" -

<head>
<script type="text/javascript">
    $(document).ready(function(){

        openFancybox();
        $('#various1').fancybox();
    });
    function openFancybox() {
        setTimeout( function() {$('#various1').trigger('click'); },5000);
    }
</script>
</head>

<body>
<a id="various1" href="#target"></a>
<div style="display: none;">
 <div id="target">welcome to shoesdekho.com</div>
</div>
</body>

Delay pop-up for 10 seconds, only pop up once

问题:

回答1:

回答2:

回答3:

回答4:

回答5:

回答6:

回答7:

收藏的人(0)

Delay pop-up for 10 seconds, only pop up once

问题:

回答1:

回答2:

回答3:

回答4:

回答5:

回答6:

回答7:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮