小编ari*_*fix的帖子

我按照在线教程(http://uposonghar.com/popup.html)创建了一个jQuery弹出窗口.

由于我对jQuery的了解不足,我无法按照我的要求使其工作.

我的问题:

1. 我想在弹出窗口处于活动状态时禁用网页滚动.
2. 背景淡入淡出弹出的颜色,而活动不在完整的网页上.

CSS:

body {
    background: #999;
}
#ac-wrapper {
    position: absolute;
    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;
}

JavaScript的:

<script type="text/javascript">
function PopUp(){
    document.getElementById('ac-wrapper').style.display="none";
}
</script> …

我按照在线教程创建了一个jQuery弹出窗口.

我想在页面加载后显示此弹出窗口/页面加载后出现+如何编码它就像它在页面加载5秒后出现一样.

由于我对jQuery的了解不足,我无法按照我的要求使其工作.

知道怎么做吗？

Javascript成为

<script type="text/javascript">
function PopUp(){
        document.getElementById('ac-wrapper').style.display="none"; 
}
</script>

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的

 <div id="ac-wrapper">
  <div id="popup">
  <center>
    <h2>Popup Content …

现场 - http://uposonghar.com/new-video/

如果你去那个网站然后悬停在嵌入的YouTube视频上,那么将出现2个共享按钮,1个用于facebook,1个用于twitter.点击该按钮后,即时共享窗口出现,5秒后,另一个弹出窗口将显示为 -

但是弹出窗口没有出现在正确的位置,我想让它垂直+水平居中.

我的css代码 -

#reveal-modal-bg {
 position: fixed;
 height: 100%;
 width: 100%;
 background: #000;
 background: rgba(0,0,0,.8);
 z-index: 100;
 display: none;
 top: 0;
 left: 0;
}
.reveal-modal {
 visibility: hidden;
 top: 100px;
 left: 50%;
 margin-left: -300px;
 width: 520px;
 background: #eee;
 position: fixed;
 z-index: 101;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
 -box-shadow: 0 0 10px rgba(0,0,0,.4);
 text-align:center;
 padding:20px 15px 30px;
}