彈出最簡單的模式化遮罩層的js代碼
更新時間：2013年12月04日 17:50:54 作者：
彈出模式化遮罩層的方法有很多，在本文為大家介紹下使用js實現(xiàn)最簡單的模式化遮罩層，具體如下，感興趣的朋友不要錯過
假設我們有一個容器container如下:
<style type=”text/css”>
#container{width:auto;height:auto; overflow:hidden;}
/*這里的overflow:hidden;屬性主要是為了設置使超出container的部分自動隱藏，之所以設置這個屬性，是為了解決ie8及以下版本瀏覽器兼容性問題*/
</style>
<div id=”container” >
</div>
現(xiàn)在要在網(wǎng)頁中彈出一個div層，使在關閉彈出的div層之前不可操作container。
那么，我們首先需要定義出這個遮罩的div層如下:
<div id=”continer”>
<!—只所以將遮罩層放到container里面
<divid=”shade” style=”width:1600px;height:900px;/*給遮罩層一個初始大小*/”>
<input name=”close” id=”close” value=”關閉”>
</div>
</div>
接下來，就是用js來使遮罩層始終顯示在屏幕上并不可操作遮罩層下面的內容，點擊關閉按鈕關閉遮罩層
<script type=”text/javascript”>
$(function(){
//獲取當前瀏覽器的內部寬和高
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//設置遮罩層的寬和高
$("#shade").width(nWidth);
$("#shade").height(nHeight);
//設置關閉按鈕居中顯示
$("#close").css("margin-top",nHeight/2-50+"px");
//設置當瀏覽器大小改變時觸發(fā)的事件
$(window).resize(function(){
//獲取當前瀏覽器的內部寬和高
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//設置遮罩層的寬和高
$("#shade").width(nWidth);
$("#shade").height(nHeight);
//設置關閉按鈕居中顯示
$("#putPwd").css("margin-top",nHeight/2-50+"px");
});
//設置關閉按鈕消除遮罩層
$("#close").click(function(){
$("#shade").removeAttr("id");
$("#shade").html("");
});
//也可用純js來寫
Document.getElementById(“shade”).style…….;
//后面多說無益，如果有興趣又實在不會寫，可以和本人聯(lián)系。
})
</script>
復制代碼 代碼如下:
<style type=”text/css”>
#container{width:auto;height:auto; overflow:hidden;}
/*這里的overflow:hidden;屬性主要是為了設置使超出container的部分自動隱藏，之所以設置這個屬性，是為了解決ie8及以下版本瀏覽器兼容性問題*/
</style>
<div id=”container” >
</div>
現(xiàn)在要在網(wǎng)頁中彈出一個div層，使在關閉彈出的div層之前不可操作container。
那么，我們首先需要定義出這個遮罩的div層如下:
復制代碼 代碼如下:
<div id=”continer”>
<!—只所以將遮罩層放到container里面
<divid=”shade” style=”width:1600px;height:900px;/*給遮罩層一個初始大小*/”>
<input name=”close” id=”close” value=”關閉”>
</div>
</div>
接下來，就是用js來使遮罩層始終顯示在屏幕上并不可操作遮罩層下面的內容，點擊關閉按鈕關閉遮罩層
復制代碼 代碼如下:
<script type=”text/javascript”>
$(function(){
//獲取當前瀏覽器的內部寬和高
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//設置遮罩層的寬和高
$("#shade").width(nWidth);
$("#shade").height(nHeight);
//設置關閉按鈕居中顯示
$("#close").css("margin-top",nHeight/2-50+"px");
//設置當瀏覽器大小改變時觸發(fā)的事件
$(window).resize(function(){
//獲取當前瀏覽器的內部寬和高
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//設置遮罩層的寬和高
$("#shade").width(nWidth);
$("#shade").height(nHeight);
//設置關閉按鈕居中顯示
$("#putPwd").css("margin-top",nHeight/2-50+"px");
});
//設置關閉按鈕消除遮罩層
$("#close").click(function(){
$("#shade").removeAttr("id");
$("#shade").html("");
});
//也可用純js來寫
Document.getElementById(“shade”).style…….;
//后面多說無益，如果有興趣又實在不會寫，可以和本人聯(lián)系。
})
</script>
相關文章
這篇文章主要介紹了JS?Date時間格式化的方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了js調試工具Console命令詳解,需要的朋友可以參考下2014-10-10
Echarts圖表點擊x軸y軸切換圖表二級數(shù)據(jù)實例代碼
最近項目用到了Echarts圖進行數(shù)據(jù)展示,所以下面這篇文章主要給大家介紹了關于Echarts圖表點擊x軸y軸切換圖表二級數(shù)據(jù)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式。JSON采用完全獨立于語言的文本格式，這些特性使JSON成為理想的數(shù)據(jù)交換語言。易于人閱讀和編寫，同時也易于機器解析和生成2021-11-11
這篇文章主要介紹了微信小程序跳轉方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了6種JavaScript繼承方式及優(yōu)缺點(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
我們不管js或iframe怎么調用的，模擬點擊就意味著打開廣告鏈接，廣告商就以為用戶點擊了他的廣告，所以我們只要保證點擊了一個鏈接但沒有跳出頁面的結果就行了，是嗎？2010-01-01
這篇文章主要介紹了詳解微信小程序開發(fā)(項目從零開始)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要介紹了關于TypeScript聲明合并，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
javascript下動態(tài)this與動態(tài)綁定實例代碼
javascript是一門動態(tài)語言，最明顯就是那個dynamic this。它一般都是作為函數(shù)調用者存在。在javascript，所有關系都可以作為對象的一個關聯(lián)數(shù)組元素而存在。2010-01-01