如何讓我的JS彈出窗口保持在最前？

當您打開網站時，2秒後，您會在後臺看到一些文字。這是JavaScript彈出窗口的一部分。我試圖讓它保持在一切之上。當有人到達現場時它會自動出現。它只是顯示我對網站所做的更新。

正如你所看到的，它顯然不在頂層。這是一個表格彈出窗口。我沒有可以應用的z-index。我嘗試過的一件事情沒有奏效。

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

是我的jQuery的方式？

來源

2013-07-09 webfrogs

爲什麼沒有z-index？焦點做了一個完全不同的事情。 Z指數是最好的解決方案。甚至可能是唯一的一個。 – Euphe

我會把它放在哪裏？我沒有將這個窗口放在樣式表中。任何造型都是線內的。如果我可以在這裏使用z-index，我不知道在哪裏。 – webfrogs

inline是好的，將它添加到

... – dsuess

回答

最終做一些更基於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);  

}

一旦所有代碼都正確插入，每次用戶重新刷新頁面時，都會在頁面上顯示居中的彈出窗口（onload）。 HTML內容可以放置在彈出窗口中，這將增加更多的可用性。

這裏是一個jsfiddle（我已經在jsfiddle中添加了圖片的外觀，改變了這些，你很好去）。

來源

2013-07-11 15:54:05 webfrogs

爲什麼不使用fancybox這樣的插件？

http://fancybox.net/

來源

2013-07-11 16:05:34

fancybox會允許onload事件？還是僅僅點擊？ – webfrogs

相關問題