2

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

我正在通过谷歌寻找一些资源，并在这个网站上找到了一个很好的例子， 但是，在这个资源中，它不支持的一件事是能够设置时间。在评论中，一位用户对设置时间提出了质疑，而创作者提出了这样的建议

var show = setTimeout("popup()", 3000);

但这对我不起作用！

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

在这里，我将链接到我正在处理的页面。对不起，是日文！您可以找到我试图在几秒钟后显示的红色弹出框。

<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! 検索で上位表示している、このウェブサイトを、&lt;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">閉じる&lt;/a>
        </div>
    </div>
</div>
4

2 回答 2

2

你可以这样做：

<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">閉じる&lt;/a>
      </div>
  </div>
</div>
<?php if(is_home()) { ?>
<script>
  window.onload = function () {
    setTimeout(function () {
      popup('<p>「千葉県　行政書士」などの<br />&nbsp;Yahoo! 検索で上位表示している、このウェブサイトを、&lt;br />&nbsp;あなたのものにしませんか?</p>');
    }, 5000);
  };
</script>
<?php } ?>

注意 last 之后的代码</div>。通过检查条件，当条件为真时，创建一个window.onload带有 setTimeout 的脚本，然后使用匿名函数调用该popup()函数。

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

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

如果我这样定义变量a：

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

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

于 2012-04-17T03:10:36.770 回答
1

尝试这个：

$(window).load(function() {
    window.setTimeout('popup()', 5000);
});
于 2012-04-17T03:15:00.083 回答