몇 초 후에 자동으로 div 쇼를 만들고 싶습니다.

창을로드하는 데 몇 초가 지난 후 약 5 초 후에 메시지 팝업으로 div를 만들 필요가 있습니다.몇 초 후에 자동으로 div 쇼를 만들고 싶습니다.

구글을 통해 몇 가지 자료를 찾고 있었는데이 site 에있는 훌륭한 예를 발견했습니다. 그러나이 소스에서 지원하지 않는 것은 시간을 설정할 수 있다는 것입니다. 코멘트에서 는 한 사용자가 시간 설정에 대한 의문을 제기하고, 제작자는이

VAR 쇼 =에서는 setTimeout 같은 ("팝업()", 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>

출처

2012-04-17 restard

일본에 대해 사과하지 마십시오! :-) –

당신은 이런 식으로 작업을 수행 할 수 있습니다

<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> 후. 조건을 확인하고 조건이 true 일 때 안에 setTimeout이있는 스크립트를 만든 다음 익명 함수를 사용하여 popup() 함수를 호출하십시오.

setTimeout에 익명 함수를 사용하면 인용 부호를 사용하는 것보다 안전합니다. 따옴표 안에 변수가 있으면 보안 위험이 있기 때문입니다. 예 :

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

이 같은 변수 a 정의하는 경우 :

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

다음 브라우저가이 기능 (함수 및 악의적 인 기능)를 호출하려고합니다.

출처

2012-04-17 03:10:36

익명 함수로'popup' 호출을 감싸는 것에 대해서도 언급해야합니다. 알고있는 것이 유용합니다! – mrtsherman

@mrtsherman 오, 나는 그것을 언급하는 것을 잊어 버렸습니다. 왜냐하면'popup' 함수는 인자를 가지고 있기 때문에 자바 스크립트 엔진이 인용 부호 사이에서 코드를 해석하도록하는 것보다이 방법이 더 안전합니다. 어쨌든, 지적 해 주셔서 감사합니다. –

대단히 감사합니다 !!! 그것은 작동합니다! – restard

이 시도 :

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

출처

2012-04-17 03:15:00 candyleung

'popup()'함수에 인수가 있기 때문에 코드가 작동하지 않는다고 생각합니다 ... –

몇 초 후에 자동으로 div 쇼를 만들고 싶습니다.

답변

관련 문제