アイデアを分析しましょう:
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> <div id="panel"></div> <div id="box"></div> <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>
最も重要な点は、イベントが大量に発生しないようにすることです。
オブジェクトの ID を取得します:
var tranId = e.target ? e.target.id : e.srcElement.id;
推奨される関連チュートリアル: js チュートリアル
以上がjsでマスク効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。