在页面加载后弹出显示

Question

我按照在线教程创建了一个jQuery弹出窗口。

我想在页面加载后显示此弹出窗口/页面加载后出现+如何编码它，就像在页面加载5秒后出现一样。

由于我对jQuery知之甚少，因此无法按照我的要求使其工作。

任何想法如何做到这一点？

Javascript成为

<script type="text/javascript"> 
function PopUp(){ 
     document.getElementById('ac-wrapper').style.display="none"; 
} 
</script> 

CSS-

#ac-wrapper { 
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background: rgba(255,255,255,.6); 
z-index: 1001; 
} 
#popup{ 
width: 555px; 
height: 375px; 
background: #FFFFFF; 
border: 5px solid #000; 
border-radius: 25px; 
-moz-border-radius: 25px; 
-webkit-border-radius: 25px; 
box-shadow: #64686e 0px 0px 3px 3px; 
-moz-box-shadow: #64686e 0px 0px 3px 3px; 
-webkit-box-shadow: #64686e 0px 0px 3px 3px; 
position: relative; 
top: 150px; left: 375px; 
} 

HTML的

<div id="ac-wrapper"> 
    <div id="popup"> 
    <center> 
    <h2>Popup Content Here</h2> 
     <input type="submit" name="submit" value="Submit" onClick="PopUp()" /> 
    </center> 
    </div> 
</div> 

<p>Page Content Here......</p> 

Answer 1

当DOM加载完成，你可以在$(document).ready()函数中添加代码。

从这里取出的onclick：

<input type="submit" name="submit" value="Submit" onClick="PopUp()" /> 

试试这个：

$(document).ready(function(){ 
    setTimeout(function(){ 
     PopUp(); 
    },5000); // 5000 to load it after 5 seconds from page load 
}); 

Answer 2

<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
     setTimeout(PopUp(),5000); // invoke Popup function after 5 seconds 
    }); 
    </script> 

Answer 3

尝试这样的事情

<script type="text/javascript"> 
    function PopUp(hideOrshow) { 
    if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none"; 
    else document.getElementById('ac-wrapper').removeAttribute('style'); 
} 
window.onload = function() { 
    setTimeout(function() { 
     PopUp('show'); 
    }, 5000); 
} 
</script> 

和你的HTML

<div id="ac-wrapper" style='display:none'> 
    <div id="popup"> 
     <center> 
      <h2>Popup Content Here</h2>  
      <input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" /> 
     </center> 
    </div> 
</div> 

演示JsFiddle

Answer 4

使用此下面的代码在网页加载显示弹出对话框：

$(document).ready(function() { 
    var id = '#dialog'; 
    var maskHeight = $(document).height(); 
    var maskWidth = $(window).width(); 
    $('#mask').css({'width':maskWidth,'height':maskHeight}); 
    $('#mask').fadeIn(500); 
    $('#mask').fadeTo("slow",0.9); 
     var winH = $(window).height(); 
    var winW = $(window).width(); 
     $(id).css('top', winH/2-$(id).height()/2); 
    $(id).css('left', winW/2-$(id).width()/2); 
    $(id).fadeIn(2000); 
    $('.window .close').click(function (e) { 
    e.preventDefault(); 
    $('#mask').hide(); 
    $('.window').hide(); 
    }); 
    $('#mask').click(function() { 
    $(this).hide(); 
    $('.window').hide(); 
}); 

}); 

<div class="maintext"> 
<h2> Main text goes here...</h2> 
</div> 
<div id="boxes"> 
<div style="top: 50%; left: 50%; display: none;" id="dialog" class="window"> 
<div id="san"> 
<a href="#" class="close agree"><img src="close-icon.png" width="25" style="float:right; margin-right: -25px; margin-top: -20px;"></a> 
<img src="san-web-corner.png" width="450"> 
</div> 
</div> 
<div style="width: 2478px; font-size: 32pt; color:white; height: 1202px; display: none; opacity: 0.4;" id="mask"></div> 
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> 

我审阅这个代码从这里Demo

Answer 5

你也可以做到这一点与更容易一个名为jQuery-confirm的插件。所有你需要做的就是添加脚本标签和样式表，他们提供在你的页面

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/jquery- 
confirm/3.3.0/jquery-confirm.min.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery- 
confirm/3.3.0/jquery-confirm.min.js"></script> 

，然后调用提示框的一个例子是：

<script> 
     $.alert({ 
    title: 'Alert!', 
    content: 'Simple alert!', 
    });