 
<!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)文章

JavaScript 參數(shù)中的數(shù)組展開 [譯]
有些時(shí)候,我們需要把一個(gè)數(shù)組展開成多個(gè)元素,然后把這些元素作為函數(shù)調(diào)用的參數(shù).JavaScript中可以使用Function.prototype.apply來實(shí)現(xiàn)這種展開操作,但它不能被應(yīng)用在執(zhí)行構(gòu)造函數(shù)的情況下.本文解釋了什么是展開操作以及如何在使用new運(yùn)算符的同時(shí)進(jìn)行展開操作
2012-09-09
Bootstrap每天必學(xué)之附加導(dǎo)航（Affix）插件
Bootstrap每天必學(xué)之附加導(dǎo)航（Affix）插件，附加導(dǎo)航即粘貼在屏幕某處實(shí)現(xiàn)錨點(diǎn)功能，感興趣的小伙伴們可以參考一下
2016-04-04
js中onload與onunload的使用示例
onload與onunload想必大家并不陌生吧，下面為大家演示下js中onload與onunload的妙用，感興趣的朋友可以參考下，希望對大家有所幫助
2013-08-08
JS獲取一個(gè)表單字段中多條數(shù)據(jù)并轉(zhuǎn)化為json格式
這篇文章主要介紹了JS獲取一個(gè)表單字段中多條數(shù)據(jù)并轉(zhuǎn)化為json格式的相關(guān)資料,需要的朋友可以參考下
2017-10-10
bootstrap fileinput 上傳插件的基礎(chǔ)使用
這篇文章主要介紹了bootstrap fileinput 上傳插件基礎(chǔ)使用，重點(diǎn)是把界面做得更加友好，更好的增加用戶體驗(yàn)。對bootstrap fileinput知識感興趣的朋友通過本文一起學(xué)習(xí)吧
2017-02-02
JavaScript面向?qū)ο蠓謱铀季S全面解析
這篇文章主要介紹了JavaScript面向?qū)ο蠓謱铀季S，js本身不是面向?qū)ο笳Z言,在我們實(shí)際開發(fā)中其實(shí)很少用到面向?qū)ο笏枷?。下文關(guān)于js面向?qū)ο笾R給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧
2016-11-11
JavaScript注冊監(jiān)聽事件和清除監(jiān)聽事件方式詳解
js中事件監(jiān)聽就是利用addEventListener來綁定一個(gè)事件,這個(gè)用法在jquery中非常常用并且簡單,但在原生js中比較復(fù)雜,下面這篇文章主要給大家介紹了關(guān)于JavaScript注冊監(jiān)聽事件和清除監(jiān)聽事件方式的相關(guān)資料,需要的朋友可以參考下
2023-05-05
小程序列表懶加載的實(shí)現(xiàn)方式
懶加載,前端人都知道的一種性能優(yōu)化方式,簡單的來說,只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí),才設(shè)置圖片正真的路徑,讓圖片顯示出來,這篇文章主要給大家介紹了關(guān)于小程序列表懶加載的實(shí)現(xiàn)方式,需要的朋友可以參考下
2022-04-04
文件上傳插件SWFUpload的使用指南
本文主要介紹了文件上傳插件SWFUpload使用指南,SWFUpload是一個(gè)flash和js相結(jié)合而成的文件上傳插件，其功能非常強(qiáng)大。需要的朋友可以參考下
2016-11-11
uniapp 引用 js 組件的方法(場景分析)
在UniApp開發(fā)過程中,我們不僅需要掌握各種UI組件的使用方法,還需要了解如何在項(xiàng)目中引入JS文件,在本文中,我將介紹UniApp中如何引入JS的方法,感興趣的朋友跟隨小編一起看看吧
2023-09-09