純js實(shí)現(xiàn)遮罩層效果原理分析
1、實(shí)現(xiàn)原理
本片文章的 是實(shí)現(xiàn)原理如下:
* 實(shí)際上彈出層、遮罩層和原頁面顯示分別為三個(gè)不同的div
* 彈出層的層級(jí)在遮罩層之上,遮罩層的層級(jí)在原頁面顯示之上;
* 遮罩層有通明效果
* 遮罩層沒有實(shí)際意義,則無需在html部分就寫上,當(dāng)然寫上同樣可以實(shí)現(xiàn)
2、代碼實(shí)現(xiàn)
html語言如下:
<html>
....
<body>
<center>
<div ><input type="button" value="go" onclick="show()"></div>
<div id="alert" style="display:none;">
<form>
登錄
<input type="text"><input type="password"><input type="submit" value="login">
</form>
</div>
</center>
</body>
</html>
javascript實(shí)現(xiàn)彈出層和遮罩層:
<span style="font-size:12px;">function show(){
var alertPart=document.getElementById("alert");
alertPart.style.display="block";
alertPart.style.position = "absolute";
alertPart.style.top = "50%";
alertPart.style.left = "50%";
alertPart.style.marginTop = "-75px";
alertPart.style.marginLeft = "-150px";
alertPart.style.background="cyan";
alertPart.style.width="300px";
alertPart.style.height="200px";
alertPart.style.zIndex = "501";
var mybg = document.createElement("div");
mybg.setAttribute("id","mybg");
mybg.style.background = "#000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "absolute";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zIndex = "500";
mybg.style.opacity = "0.3";
mybg.style.filter = "Alpha(opacity=30)";
document.body.appendChild(mybg);
document.body.style.overflow = "hidden";
}
</script></span>
這里用z-index來區(qū)分層級(jí),opacity和filter:alpha(opacity=)透明度,document.createElement("div")和document.body.appendChild()這些都是在之前出現(xiàn)過,應(yīng)用過的了,這樣我們就能實(shí)現(xiàn)了,其實(shí)當(dāng)原理明白了的那一刻,一切也就容易多了吧。
路漫漫而修遠(yuǎn)兮啊
- js+html5實(shí)現(xiàn)半透明遮罩層彈框效果
- js點(diǎn)擊按鈕實(shí)現(xiàn)帶遮罩層的彈出視頻效果
- js鼠標(biāo)懸浮出現(xiàn)遮罩層的方法
- js實(shí)現(xiàn)遮罩層彈出框的方法
- js css 實(shí)現(xiàn)遮罩層覆蓋其他頁面元素附圖
- js彈出div并顯示遮罩層
- JS實(shí)現(xiàn)遮罩層效果的簡(jiǎn)單實(shí)例
- 原生js實(shí)現(xiàn)半透明遮罩層效果具體代碼
- JS遮罩層效果 兼容ie firefox jQuery遮罩層
- javascript實(shí)現(xiàn)遮罩層動(dòng)態(tài)效果實(shí)例
相關(guān)文章
淺析Virtual DOM的概念與其在現(xiàn)代前端框架中的實(shí)踐
這篇文章將深入探討Virtual DOM(虛擬DOM)的概念,分析其對(duì)前端開發(fā)的革新影響,并以此展示前端技術(shù)的深度和魅力,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12JS實(shí)現(xiàn)太極旋轉(zhuǎn)思路分析
本文主要對(duì)JS實(shí)現(xiàn)太極旋轉(zhuǎn)的思路進(jìn)行分析,步驟清晰,簡(jiǎn)短的文字,深入的理解。需要的朋友可以看下2016-12-12javascript實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入js與css等靜態(tài)資源文件的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入js與css等靜態(tài)資源文件的方法,基于回調(diào)函數(shù)實(shí)現(xiàn)該功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07webpack中CommonsChunkPlugin詳細(xì)教程(小結(jié))
本篇文章主要介紹了webpack中CommonsChunkPlugin詳細(xì)教程(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11JavaScript數(shù)組常用方法解析及數(shù)組扁平化
這篇文章主要介紹了JavaScript數(shù)組常用方法解析及數(shù)組扁平化,數(shù)組作為在開發(fā)中常用的集合,除了for循環(huán)遍歷以外,還有很多內(nèi)置對(duì)象的方法,包括map,以及數(shù)組篩選元素filter等2022-07-07使用JS批量選中功能實(shí)現(xiàn)更改數(shù)據(jù)庫中的status狀態(tài)值(批量展示)
我們?cè)陂_發(fā)項(xiàng)目的時(shí)候經(jīng)常會(huì)在后臺(tái)管理時(shí)用到批量展示功能來動(dòng)態(tài)的修改數(shù)據(jù)庫的值。下面以修改數(shù)據(jù)庫的status狀態(tài)值來實(shí)現(xiàn)批量展示功能2016-11-11Echarts圖表移動(dòng)端橫屏進(jìn)入退出的實(shí)現(xiàn)
本文主要介紹了Echarts圖表移動(dòng)端橫屏進(jìn)入退出的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05