js彈出的對話窗口永遠(yuǎn)保持居中顯示
更新時(shí)間：2012年12月15日 17:30:24 作者：
本文將介紹js彈出的對話窗口永遠(yuǎn)保持居中顯示實(shí)現(xiàn)方法，需要了解的朋友可以參考下
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.Div_Scroll {
position:fixed;
margin:-10px;
visibility:hidden;
background-color:#808080;
opacity:0.6;
z-index:99;
}
.Div_Scroll_Content {
position:relative;
margin-top:20%;
width:inherit;
height:inherit;
}
.Div_AlertWindow {
margin:auto;
width:200px;
height:100px;
background-color:lightblue;
border:5px solid #f00;
}
</style>
<script type="text/javascript">
window.onload = function () {
var alertWindow = $("alertParent");
alertWindow.style.width = window.screen.availWidth + "px";
alertWindow.style.height = window.screen.height + "px";
$("Sure").onclick = function () {
alertWindow.style.visibility = "hidden";
}
}
function ShowAlert() {
var alertWindow = $("alertParent");
alertWindow.style.visibility = "visible";
}
$ = function (id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<div id="alertParent" class="Div_Scroll">
<div class="Div_Scroll_Content">
<div id="AlertWindow" class="Div_AlertWindow">
<input type="button" id="Sure" value="close alert Dialog..." />
</div>
</div>
</div>
<div style="height:1300px; padding-top:200px;" >
<input id="alertButton" type="button" onclick="ShowAlert();" value="Show alert Dialog..."/>
</div>
</body>
</html>
添加遮罩層
相關(guān)文章
由于在JS中，所有的函數(shù)都是對象，所以使用函數(shù)指針十分簡單，也是這些東西使JS函數(shù)有趣且強(qiáng)大，這里特分享一下2018-07-07
Javascript類型系統(tǒng)之String字符串類型詳解
這篇文章主要介紹了Javascript類型系統(tǒng)之String字符串類型詳解的相關(guān)資料,需要的朋友可以參考下2016-06-06
JS之延時(shí)器和定時(shí)器執(zhí)行示例詳解
這篇文章主要為大家介紹了JS之延時(shí)器和定時(shí)器執(zhí)行示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
淺析AMD CMD CommonJS規(guī)范--javascript模塊化加載學(xué)習(xí)心得總結(jié)
下面小編就為大家分享一篇淺析AMD CMD CommonJS規(guī)范--javascript模塊化加載學(xué)習(xí)心得總結(jié)。小編覺得寫的非常不錯(cuò)，需要的朋友可以過來參考一下2016-03-03
JavaScrip報(bào)錯(cuò):module?is?not?defined的原因及解決
這篇文章主要給大家介紹了關(guān)于JavaScrip報(bào)錯(cuò):module?is?not?defined的原因及解決方法,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
JavaScript中實(shí)現(xiàn)塊作用域的方法
在Javascript中由于沒有作用域的概念，所以很容易發(fā)生標(biāo)識符名稱的沖突，尤其是在比較大的項(xiàng)目中，這類情況更容易發(fā)生
2010-04-04 
js利用正則表達(dá)式檢驗(yàn)輸入內(nèi)容是否為網(wǎng)址
這篇文章主要為大家詳細(xì)介紹了js利用正則表達(dá)式檢驗(yàn)輸入內(nèi)容是否為網(wǎng)址的相關(guān)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-07-07 
微信小程序?qū)崿F(xiàn)左側(cè)滑動導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左側(cè)滑動導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10 
微信小程序scroll-view實(shí)現(xiàn)左右聯(lián)動效果
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實(shí)現(xiàn)左右聯(lián)動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09