如何让我的JS弹出窗口保持领先

我在这里有一个网站。

当你打开网站时，2秒钟后，你会在后台看到一些文本。这是JavaScript弹出窗口的一部分。我正在努力让它保持在其他一切之上。它被设置为当有人到达网站时自动出现。它只是显示我对网站的更新。

正如你所看到的，上面显然没有。这是一个弹出的表格。我无法应用z索引。我尝试过的一件事没有奏效。

<body onblur="self.focus();">

我的jQuery挡道了吗？

最终做了一些更基于CSS的事情。。。

CSS

/*STYLES FOR CSS POPUP*/

#blanket {
   background-color:#111;
   opacity: 0.65;
   filter: alpha(opacity=65)
   *background:none;
   position:absolute;
   z-index: 9001;
   top:0px;
   left:0px;
   width:100%;
}
#popUpDiv {
    position:absolute;
    background-image:url(images/background_img.png);
    background-repeat:no-repeat;    
    width:400px;
    height:400px;
    margin-top: -200px; /* auto, centers horizontally and -120px is half your height to finish the centering vertically */
    border:5px solid #000;
    z-index: 9002;
}

#popUpDiv .close {
    background-image: url(images/x.png); 
    background-repeat: no-repeat;
    position:absolute; 
    top:10px; 
    right:10px
}

HTML

<body onload="popup('popUpDiv')">
<div id="blanket" style="display:none"></div>
<div id="popUpDiv" style="display:none">
<a href="#" onclick="popup('popUpDiv')" class="close"><img src="images/x.png" /></a>
        <br />
    <h3 style="color: #FFF; padding-left: 10px;">Updates to the AR Toolbox</h3>
            <br />
                <br />
                <div style="width: 350px; height: 300px; text-align: left;">
                <p style="padding-left: 50px; color: #000;">• Check out some content here...</p>
                    <br />
                <p style="padding-left: 50px; color: #000;">• Check out some content here...</p>                
                    <br />
                <p style="padding-left: 50px; color: #000;">• Check out some content here...</p>
                    <br />
        </div>
</div>

<body onunload="javascript: exitpop()" >

JavaScript

function toggle(div_id) {
    var el = document.getElementById(div_id);
    if ( el.style.display == 'none' ) { el.style.display = 'block';}
    else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
    if (typeof window.innerWidth != 'undefined') {
        viewportheight = window.innerHeight;
    } else {
        viewportheight = document.documentElement.clientHeight;
    }
    if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
        blanket_height = viewportheight;
    } else {
        if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
            blanket_height = document.body.parentNode.clientHeight;
        } else {
            blanket_height = document.body.parentNode.scrollHeight;
        }
    }
    var blanket = document.getElementById('blanket');
    blanket.style.height = blanket_height + 'px';
    var popUpDiv = document.getElementById(popUpDivVar);
    popUpDiv_height=blanket_height/2-200;//200 is half popup's height
    popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
    if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerHeight;
    } else {
        viewportwidth = document.documentElement.clientHeight;
    }
    if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
        window_width = viewportwidth;
    } else {
        if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
            window_width = document.body.parentNode.clientWidth;
        } else {
            window_width = document.body.parentNode.scrollWidth;
        }
    }
    var popUpDiv = document.getElementById(popUpDivVar);
    window_width=window_width/2-200;//200 is half popup's width
    popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
    blanket_size(windowname);
    window_pos(windowname);
    toggle('blanket');
    toggle(windowname);     
}

一旦所有这些代码都正确插入，每次用户重新刷新页面时，您都会在页面上获得居中的弹出窗口（加载）。HTML内容可以放在弹出窗口中，这将增加更多的可用性。

这是一个jsfiddle（我在jsfiddler中添加了一些图片以获得外观。把它们换掉，你就可以开始了）。

为什么不使用像fancybox这样的插件？

http://fancybox.net/

相关内容

最新更新

热门标签：