溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關JavaScript中怎么實現蒙版效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
思路
1.監聽按鈕的點擊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> <p id="panel"></p> <p id="box"></p> <script src="js/myFunc.js"></script> <script> window.onload = function (){ //1.監聽事件的點擊 btn.onclick = function (event){ //1.0 阻止冒泡 if(event && event.stopPropagation){ //W3c標準 event.stopPropagation(); }else{ //IEx系列 IE 678 event.cancelBubble = ture; } //1.1隱藏的顯現出來 $("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.href = "http://www.baidu.com"; } } }</script>
看完上述內容，你們對JavaScript中怎么實現蒙版效果有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
