Question

我需要访问者在我的页面上停留5-10秒，直到出现一个简单的弹出窗口。我尝试了setTimeout函数，因为关闭按钮在30秒后出现，但除了阴影之外的其他元素出现在页面外的错误位置。任何想法如何在这里纠正？这是我到目前为止的代码：

var shadow = $('<div id="shadowElem"></div>');
var speed = 1000;
$(document).ready(function() {
    $('body').prepend(shadow);
});
$(window).load( function() {
    screenHeight = $(window).height();
    screenWidth = $(window).width();
    elemWidth = $('#dropElem').outerWidth(true);
    elemHeight = $('#dropElem').outerHeight(true)

    leftPosition = (screenWidth / 2) - (elemWidth / 2);
    topPosition = (screenHeight / 2) - (elemHeight / 2);

    setTimeout(function() {
    $("#dropClose").show();
    }, 30 * 1000);

    $('#dropElem').css({
        'left' : leftPosition + 'px',
        'top' : -elemHeight + 'px'
    });
    $('#dropElem').show().animate({
        'top' : topPosition
    }, speed);

    shadow.animate({
        'opacity' : 0.7
    }, speed);

    $('#dropClose').click( function() {
        shadow.animate({
            'opacity' : 0
        }, speed);
        $('#dropElem').animate({
        'top' : -elemHeight + 'px'
    }, speed, function() {
            shadow.remove();
            $(this).remove();
        });            
    });
});

Answer 1

你应该使用javascript setTimeout（） 方法来延迟你想要在指定的毫秒数内延迟的任何内容。

你应该试试

setTimeout(function() {
    $('#dropElem').show().animate({
        'top' : topPosition
    }, speed);
}, 10000);

而不是

$('#dropElem').show().animate({
    'top' : topPosition
}, speed);

Answer 2

该工作人员，但由于shadowElem计时，屏幕保持黑暗直到弹出窗口出现。我添加了

  setTimeout(function() {
  $("#shadowElem").show();
  }, 5 * 1000);

和

    display:none;

到#shadowElem的css

此外，弹出动画的时间设置为7秒，因此两者之间的差异使其不那么令人沮丧

我应该在此代码中添加什么才能在10秒后显示弹出窗口

2 个答案: