页面加载后显示弹出窗口

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

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

由于我对jQuery的了解不足,我无法按照我的要求使其工作。

知道怎么做吗?

Javascript成为

 function PopUp(){ document.getElementById('ac-wrapper').style.display="none"; }  

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的

  

Page Content Here......

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

从这里删除onclick:

  

试试这个:

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

尝试这样的事情

  

和你的HTML

  

演示JsFiddle

   

使用下面的代码显示页面加载时的弹出框:

 $(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(); }); }); 

Main text goes here...

我在这里引用了这个代码Demo

使用名为jQuery-confirm的插件,您也可以更轻松地完成这项工作。 您所要做的就是添加脚本标记以及它们在页面中提供的样式表

   

然后调用警报框的示例是: