Question

我需要制作一个div，并在几秒钟后弹出一条消息加载窗口，大约5秒钟。

我正在通过谷歌寻找一些来源，并在此site找到一个很好的例子但是，在这个来源中，它不支持的一件事是能够设定时间。在评论中，一个用户质疑设置时间，创建者建议这样的事情

var show = setTimeout（“popup（）”，3000）;

但它对我不起作用！

当然，我问同样的问题，但现在没有得到答案。

在这里，我将链接到我正在处理的page。对不起，这是日文的！你可以找到一个我想在几秒钟后出现的红色弹出框。

<script>
$(document).ready(function () {

    // if user clicked on button, the overlay layer or the dialogbox, close the dialog  
    $('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {     
        $('#dialog-overlay, #dialog-box').hide();       
        return false;
    });

    // if user resize the window, call the same function again
    // to make sure the overlay fills the screen and dialogbox aligned to center    
    $(window).resize(function () {

        //only do it if the dialog box is not hidden
        if (!$('#dialog-box').is(':hidden')) popup();       
    }); 


});

//Popup dialog
function popup(message) {

    // get the screen height and width  
    var maskHeight = $(document).height();  
    var maskWidth = $(window).width();

    // calculate the values for center alignment
    var dialogTop =  (maskHeight/3) - ($('#dialog-box').height());  
    var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); 

    // assign values to the overlay and dialog box
    $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
    $('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();

    // display the message
    $('#dialog-message').html(message);
}
</script>

<body<?php if(is_home()): ?> onload="popup('<p>「千葉県　行政書士」などの<br />&nbsp;Yahoo! 検索で上位表示している、このウェブサイトを、<br />&nbsp;あなたのものにしませんか?</p>')"<?php endif; ?>>
<div id="dialog-overlay"></div>
    <div id="dialog-box">
        <div class="dialog-content">
            <div id="arrows"><img src="<?php bloginfo('template_url'); ?>/img/dilog-box_arrow.png" alt="" ></div>
            <div id="dialog-message"></div>
            <div class="al_c"><a href="<?php echo home_url(); ?>/sales/" target="_self"><img src="<?php bloginfo('template_url'); ?>/img/dialog-box_btn_off.png" class="btn" alt="HPレンタルの詳細ページへ" /></a></div>
            <a href="#" class="button">閉じる</a>
        </div>
    </div>
</div>

Answer 1

你可以这样做：

<script>
$(document).ready(function () {

    // if user clicked on button, the overlay layer or the dialogbox, close the dialog  
    $('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {     
        $('#dialog-overlay, #dialog-box').hide();       
        return false;
    });

    // if user resize the window, call the same function again
    // to make sure the overlay fills the screen and dialogbox aligned to center    
    $(window).resize(function () {

        //only do it if the dialog box is not hidden
        if (!$('#dialog-box').is(':hidden')) popup();       
    }); 


});

//Popup dialog
function popup(message) {

    // get the screen height and width  
    var maskHeight = $(document).height();  
    var maskWidth = $(window).width();

    // calculate the values for center alignment
    var dialogTop =  (maskHeight/3) - ($('#dialog-box').height());  
    var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); 

    // assign values to the overlay and dialog box
    $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
    $('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();

    // display the message
    $('#dialog-message').html(message);
}
</script>

<body>
 <div id="dialog-overlay"></div>
  <div id="dialog-box">
      <div class="dialog-content">
          <div id="arrows"><img src="<?php bloginfo('template_url'); ?>/img/dilog-box_arrow.png" alt="" ></div>
          <div id="dialog-message"></div>
          <div class="al_c"><a href="<?php echo home_url(); ?>/sales/" target="_self"><img src="<?php bloginfo('template_url'); ?>/img/dialog-box_btn_off.png" class="btn" alt="HPレンタルの詳細ページへ" /></a></div>
          <a href="#" class="button">閉じる</a>
      </div>
  </div>
</div>
<?php if(is_home()) { ?>
<script>
  window.onload = function () {
    setTimeout(function () {
      popup('<p>「千葉県　行政書士」などの<br />&nbsp;Yahoo! 検索で上位表示している、このウェブサイトを、<br />&nbsp;あなたのものにしませんか?</p>');
    }, 5000);
  };
</script>
<?php } ?>

请注意上一个</div>之后的代码。通过检查条件和条件为真，创建一个内置setTimeout的window.onload脚本，然后使用匿名函数调用popup()函数。

在setTimeout中使用匿名函数比使用引号更安全，因为如果引号中有变量，这将是一个安全风险。例如：

setTimeout("popup(" + a + )", 1000);

如果我像这样定义变量a：

a = '"something that will popup"); maliciousFunction(';

然后浏览器将调用2函数（您的函数和恶意函数）。

Answer 2

试试这个：

$(window).load(function() {
    window.setTimeout('popup()', 5000);
});

我想在几秒钟后自动制作div节目

2 个答案: