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