页面加载时如何自动弹出CSS3模态窗口？

我试图解决这个问题。如何让它在页面上工作。

我的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; } 

并打开弹出窗口我们有这个链接

 Open Modal 

我尝试过这种技术如何在HTML5和CSS3中自动弹出一个模态窗口，但它不起作用..请帮助.t谢谢

ps：我也尝试使用jQuery链接点击页面加载，但这也没有用:(这里是jquery代码。

 $(window).load(function () { $("#preloader").delay(1000).fadeOut(1000); $('#notLoggedModalClick').click(); 

}）;

Answer 1

设置一个div

 
 text here...  

在样式集显示：隐藏

 #popup { position:absolute; display:none; top:200px; left:50%; width:500px; margin-left:-250px; border:1px solid blue; padding:20px; background-color:white; } 

加载页面时只需设置display:block

Answer 2

load()已弃用为1.8版，我的建议是：

 window.onload = function (){ $("#preloader").delay(1000).fadeOut(1000); $('#notLoggedModalClick').click(); } 

但是如果直接触发弹出窗口而不是单击触发器，它会更好。

Answer 3

回答1种工作，在firefox中会显示模态，但不允许它正确关闭。 在chrome中，它根本不会在加载时打开。 最后，即使它会起作用，它也会再次启动动画序列并以不允许它关闭的方式加载它。