2

ウィンドウをロードするために数秒後、おそらく約5秒後にメッセージがポップアップするdivを作成する必要があります。

Google でいくつかのソースを探していたところ、このサイトで素晴らしい例を見つけました が、このソースでサポートされていないことの 1 つは、時間を設定できることです。コメントで、あるユーザーが時間の設定について質問し、作成者は次のような提案をしました

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

You can do it like this:

<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 } ?>

Note the code after last </div>. By checking the condition and when the condition is true, create a script with window.onload with setTimeout inside, then use a anonymous function to call the popup() function.

Using an anonymous function into setTimeout is more secure than using quotation mark, because if there has an variable into quotation mark, this will be a secure risk. Example:

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

If I define the variable a like this:

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

then the browser are going to call 2 function (your function and a malicious function).

于 2012-04-17T03:10:36.770 に答える
1

これを試して：

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