页面加载后显示弹出窗口
我按照在线教程创建了一个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的
Popup Content Here
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的插件,您也可以更轻松地完成这项工作。 您所要做的就是添加脚本标记以及它们在页面中提供的样式表
然后调用警报框的示例是: