js與css實(shí)現(xiàn)彈出層覆蓋整個(gè)頁(yè)面的方法
本文實(shí)例講述了js與css實(shí)現(xiàn)彈出層覆蓋整個(gè)頁(yè)面的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
彈出層透明背景加框的常用樣式和結(jié)構(gòu)如下:
position:fixed;
_position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:#000;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
display:none;
}
.alertMessageDivBorder{
position:fixed;
_position:absolute;
width:750px;
height:370px;
left:50%;
top:50%;
margin:-185px 0 0 -375px;
background:#000;
filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity:0.3;
z-index:98;
display:none;
}
.alertMessageDiv{
position:fixed;
_position:absolute;
width:730px;
height:350px;
left:50%;
top:50%;
margin:-175px 0 0 -365px;
background:#fff;
z-index:99;
display:none;
font-size:14px;
}
<div class="alertMessageBg"></div>
<div class="alertMessageDivBorder"></div>
<div class="alertMessageDiv"></div>
彈出層背景覆蓋整個(gè)網(wǎng)頁(yè)的方法
1.css方法
position:fixed;
_position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:#000;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
display:none;
}
2.js方法
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:#000;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
display:none;
}
var bgWidth = document.body.clientWidth + 'px',
bgHeight = document.body.clientHeight + 'px',
alertBgNode = $('.alertMessageBg');
alertBgNode.css({'width':bgWidth,'height':bgHeight});
對(duì)比以上兩種方法，顯然css方法更省事，尤其在不用兼容ie6的現(xiàn)在。
希望本文所述對(duì)大家基于JS的web程序設(shè)計(jì)有所幫助。
- js實(shí)現(xiàn)div彈出層的方法
- 使用js實(shí)現(xiàn)關(guān)閉js彈出層的窗口
- js 點(diǎn)擊頁(yè)面其他地方關(guān)閉彈出層(示例代碼)
- js寫一個(gè)彈出層并鎖屏效果實(shí)現(xiàn)代碼
- js+css 實(shí)現(xiàn)遮罩居中彈出層(隨瀏覽器窗口滾動(dòng)條滾動(dòng))
- js彈出層之1：JQuery.Boxy (二)
- Js Jquery創(chuàng)建一個(gè)彈出層可加載一個(gè)頁(yè)面
- jquery.artwl.thickbox.js 一個(gè)非常簡(jiǎn)單好用的jQuery彈出層插件
- Js制作簡(jiǎn)單彈出層DIV在頁(yè)面居中 中間顯示遮罩的具體方法
- javascript實(shí)現(xiàn)彈出層效果
相關(guān)文章
JavaScript通過(guò)prototype給對(duì)象定義屬性用法實(shí)例
這篇文章主要介紹了JavaScript通過(guò)prototype給對(duì)象定義屬性用法,實(shí)例分析了prototype的功能及使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
詳解js的延遲對(duì)象、跨域、模板引擎、彈出層、AJAX【附實(shí)例下載】
本篇文章主要介紹了JavaScript的延遲對(duì)象、跨域、模板引擎、彈出層、AJAX，對(duì)其進(jìn)行示例解析，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
這篇文章主要介紹了JavaScript Reduce使用的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下2021-03-03
微信小程序五子棋游戲的棋盤，重置，對(duì)弈實(shí)現(xiàn)方法【附demo源碼下載】
這篇文章主要介紹了微信小程序五子棋游戲,可實(shí)現(xiàn)五子棋的棋盤繪制,重置,對(duì)弈判定等功能實(shí)現(xiàn),并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2019-02-02
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單的拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript實(shí)現(xiàn)計(jì)算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)計(jì)算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù),本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JSON無(wú)限折疊菜單編寫實(shí)例，有需要的朋友可以參考一下2013-12-12
javascript Table 中2個(gè)列（TD）的交換實(shí)現(xiàn)代碼
非常不錯(cuò)的用js控制talbe中td的位置的實(shí)現(xiàn)代碼。2009-02-02
下拉菜單點(diǎn)擊實(shí)現(xiàn)連接跳轉(zhuǎn)功能的js代碼
下拉菜單點(diǎn)擊實(shí)現(xiàn)連接跳轉(zhuǎn)效果想必不是很常見吧，下面與大家分享下具體的實(shí)現(xiàn)另有實(shí)例，感興趣的朋友可以參考下哈2013-05-05
在JavaScript里，函數(shù)(todoA、todoB、todoC)就是對(duì)象，“()”的作用就是就是執(zhí)行函數(shù)對(duì)象，二者簡(jiǎn)單地組合一下就能夠讓代碼清晰簡(jiǎn)潔很多了，何樂(lè)不為呢？2010-03-03