js實現(xiàn)蒙版效果
更新時間：2020年01月11日 10:07:05 投稿：lijiao
這篇文章主要為大家詳細介紹了比較常見的js蒙版效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)蒙版效果展示的具體代碼，供大家參考，具體內容如下
思路
1.監(jiān)聽按鈕的點擊
2.阻止冒泡（最關鍵的一點）
3.讓隱藏的顯示出來
4.隱藏滾動條
5.點擊文檔：獲取點擊的標簽
判斷：讓顯示的都隱藏
顯示滾動條
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width:100%;
height:100%;
}
#panel{
width:100%;
height:2000px;
background-color:#000;
opacity: 0.4; //透明度
filter: alpha(opacity： 40); //用于兼容IE瀏覽器
position: absolute;
top:0;
left:0;
display: none;
}
#box{
width:300px;
height:300px;
background-color: #fff;
position: absolute;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-150px;
display: none;
border-radius: 5px;
}
</style>
</head>
<body>
<button id="btn">登錄</button>
<div id="panel"></div>
<div id="box"></div>
<script src="js/myFunc.js"></script>
<script>
window.onload = function (){
//1.監(jiān)聽事件的點擊
btn.onclick = function (event){
//1.0 阻止冒泡
if(event && event.stopPropagation){ //W3c標準
event.stopPropagation();
}else{ //IEx系列 IE 678
event.cancelBubble = ture;
}
//1.1隱藏的顯現(xiàn)出來
$("box").style.display = "block";
$("panel").style.display = "block";
//1.2隱藏滾動條
document.body.style.overflow = "hidden";
}
//2.點擊文檔
document.onclick = function (event){
var e = event || window.event;
//2.1獲取點擊的標簽
var tranId = e.target ? e.target.id : e.srcElement.id; //target:獲取當前操作對象
//2.2判斷
if(tranId !== "box"){
//1.1顯示的隱藏出來
$("box").style.display = "none";
$("panel").style.display = "none";
//1.2顯示滾動條
document.body.style.overflow = "auto";
}else{
window.location.;
}
}
}
</script>
最為重要的一點是要阻止事件冒泡
獲取對象的id： var tranId = e.target ? e.target.id : e.srcElement.id;
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了openlayers4實現(xiàn)的點動態(tài)擴散，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
小編給大家推薦幾款使用Javascript實現(xiàn)的遮罩效果登陸框，其實這種效果是很常見的，在許多互動的社區(qū)及其它的一些地方，彈出框應用想當流行，在不妨礙網(wǎng)頁運行的情況下，用戶可以輸入登錄信息，實現(xiàn)完美登錄。2015-11-11
JavaScript中for-in和for-of的不同之處及如何正確使用
這篇文章主要給大家介紹了關于JavaScript中for-in和for-of的不同之處及如何正確使用它們的相關資料,無論是for...in還是for...of語句都是迭代一些東西,它們之間的主要區(qū)別在于它們的迭代方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-05-05
如何通過js在上傳前就拿到它的總幀數(shù)來判斷呢？本文就跟大家分享一種解決方案，并將其封裝成插件發(fā)布至npm倉庫，快跟隨小編一起學習一下吧2022-05-05
Javascript和Java、C這些語言不同，它是一種無類型、弱檢測的語言。它對變量的定義并不需要聲明變量類型，我們只要通過賦值的形式，可以將各種類型的數(shù)據(jù)賦值給同一個變量2012-01-01
圖片img的src不變,想讓瀏覽器重新加載怎么辦,在圖片地址src不變的情況下讓瀏覽器重新加載圖片,實際上在src不變時，瀏覽器直接就去讀取緩存2013-03-03
firefox瀏覽器下javascript 拖動層效果與原理分析代碼
這篇文章主要給大家介紹了關于在firefox瀏覽器下如何利用javascript實現(xiàn)拖動層效果，以及其中的原理分析，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，下面來一起看看吧2007-12-12
Jsonp 關鍵字詳解及json和jsonp的區(qū)別，ajax和jsonp的區(qū)別
這篇文章主要介紹了Jsonp 關鍵字詳解及json和jsonp的區(qū)別，ajax和jsonp的區(qū)別 的相關資料,需要的朋友可以參考下2015-12-12
創(chuàng)建、調用JavaScript對象的方法集錦
這篇文章主要介紹了創(chuàng)建、調用JavaScript對象的方法集錦,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了JS針對瀏覽器窗口關閉事件的監(jiān)聽方法,總結整理了幾種常用的瀏覽器關閉事件監(jiān)聽方法,非常簡單實用,需要的朋友可以參考下2016-06-06