【问题标题】:What should I add to this code to make popup appear after 10 seconds我应该在此代码中添加什么以使弹出窗口在 10 秒后出现
【发布时间】:2015-02-24 20:43:15
【问题描述】:

我需要访问者在我的页面上停留 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();
        });            
    });
});

【问题讨论】:

    标签: javascript jquery popup timeout delay


    【解决方案1】:

    那个工人,但由于 shadowElem 计时,屏幕一直保持黑暗直到弹出窗口出现。我加了

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

        display:none;
    

    到#shadowElem 的css

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

    【讨论】:

    • 我认为你应该为 shadowElem 设置为 7 * 1000 - 我的意思是 dropElem 相同
    【解决方案2】:

    您应该使用 javascript setTimeout() 方法将您想要延迟的任何内容延迟指定的毫秒数。

    你应该试试

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

    而不是

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

    【讨论】:

      猜你喜欢
      • 2018-01-02
      • 2019-08-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-04-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多