当页面加载时如何自动弹出CSS3模式窗口? [英] How to Auto Popup a CSS3 Modal Window When Page Loads?
本文介绍了当页面加载时如何自动弹出CSS3模式窗口?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的css
pre> .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);
背景:-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; }
要打开弹出窗口,我们有这个链接
< a href =#openModal>打开模式< / a>
我尝试了此技术
但它没有工作..请帮助谢谢
ps:我也尝试链接点击页面加载使用jQuery,但也没有工作:(
在这里是jquery代码。
$(window).load(function(){
$(#preloader ).delay(1000).fadeOut(1000);
$('#notLoggedModalClick')。click();
});
解决方案
< div id =popup>
text here ...
< / div>
<$ c $ p> popup
{
position:absolute;
display:none;
top:200px;
left:50%;
width:500px;
margin-left:-250px;
border:1px solid blue;
padding:20px;
background-color:white;
}
当页面加载时set
display: / code>
< script type =text / javascript>
function show_popup()
{
document.getElementById('popup')。style.display ='block';
}
window.onload = show_popup;
< / script>
i am trying to figure this out.How o i make it work on page Load.
my 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 automatically but it didn't work.. Please help.t thanks
ps: i also tried link click on page load using jQuery, but that also didn't work :( here is the jquery code.
$(window).load(function () { $("#preloader").delay(1000).fadeOut(1000); $('#notLoggedModalClick').click();
});
解决方案set a 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
<script type="text/javascript"> function show_popup() { document.getElementById('popup').style.display = 'block'; } window.onload = show_popup; </script>
这篇关于当页面加载时如何自动弹出CSS3模式窗口?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文