jQuery 如何在页面加载时自动弹出 CSS3 模态窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16126788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Auto Popup a CSS3 Modal Window When Page Loads?
提问by designerNProgrammer
i am trying to figure this out.How o i make it work on page Load.
我想弄清楚这一点。如何让它在页面加载上工作。
my css
我的 CSS
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
And to open the popup we have this link
要打开弹出窗口，我们有这个链接
<a href="#openModal">Open Modal</a>
I Tried this technique How to make a modal window in HTML5 and CSS3 popup automaticallybut it didn't work.. Please help.t thanks
我试过这种技术如何在 HTML5 和 CSS3 中自动弹出一个模态窗口，但它没有用..请帮忙。谢谢
ps: i also tried link click on page load using jQuery, but that also didn't work :( here is the jquery code.
ps：我也尝试过使用 jQuery 链接点击页面加载，但这也不起作用:( 这是 jquery 代码。
$(window).load(function () {
$("#preloader").delay(1000).fadeOut(1000);
$('#notLoggedModalClick').click();
});
});
回答by Wayne Tun
set a div
设置一个div
<div id="popup">
text here...
</div>
at style set display:hidden
在样式集显示：隐藏
#popup
{
position:absolute;
display:none;
top:200px;
left:50%;
width:500px;
margin-left:-250px;
border:1px solid blue;
padding:20px;
background-color:white;
}
when page is loaded just set display:block
当页面加载时刚刚设置 display:block
<script type="text/javascript">
function show_popup()
{
document.getElementById('popup').style.display = 'block';
}
window.onload = show_popup;
</script>
回答by egig
load()is deprecated as version 1.8, My suggestion:
load()已弃用为 1.8 版，我的建议是：
window.onload = function (){
$("#preloader").delay(1000).fadeOut(1000);
$('#notLoggedModalClick').click();
}
but its better if you directly fire the popup instead of click the trigger.
但是如果您直接触发弹出窗口而不是单击触发器会更好。
回答by user2593849
Answer 1 sort of works, in firefox it will display the modal, however it will not allow it to be closed properly. In chrome, it will not open on load at all. In the end, even when it will work, it just starts the animation sequence again and loads it in a way that will not allow it to be closed.
回答 1 种作品，在 Firefox 中它会显示模态，但它不会允许它正确关闭。在 chrome 中，它根本不会在加载时打开。最后，即使它可以工作，它也只是再次启动动画序列并以不允许它关闭的方式加载它。
