私はここにウェブサイトを持っています。
サイトを開くと、2 秒後に背景にテキストが表示されます。これは JavaScript ポップアップ ウィンドウの一部です。私はそれを他のすべての上にとどまらせようとしています。誰かがサイトに到着すると、自動的に表示されるように設定されています。サイトに加えた更新を表示するだけです。
ご覧のとおり、明らかにトップではありません。テーブルのポップアップです。それに適用できる z-index はありません。私が試したことの1つは、うまくいかなかったということです。
<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があります（見た目のためにjsfiddleに画像を追加しました。それらを変更すると、準備完了です）。
fancybox のようなプラグインを使用してみませんか?