当页面加载时如何自动弹出CSS3模式窗口？ [英] How to Auto Popup a CSS3 Modal Window When Page Loads?

问题描述

我的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屋！