当我在博客上显示弹出窗口时，如何使所有背景都不可点击？

Question

我要禁用我的背景，直到用户点击X按钮。 当弹出窗口出现时，我使用下面的css代码来阻止整个页面。 但它正在工作（可见页面仅涵盖了所有内容）。 我有一个问题，如果我的页面有滚动条意味着页面的剩余底部未被阻止程序覆盖。

 #pop { height: 150px; width: 150px; position: fixed; bottom: 50%; right: 50%; border: 2px solid; padding: 10px; background: #FFFFFF; border-radius: 7px; z-index: 999; } #close { right: 5; top: 5; float: right; } 

 <div id="pop"> <button id="close" onclick="document.getElementById('pop').style.display='none'">X</button> </div> 

Answer 1

---

试试这应该有所帮助

 .display { height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: #000000; display: none; } .display2 { background-color: White; border: 2px solid black; display: block; width: 350px; z-index: 1001; top: 60px; left: 240px; position: fixed; padding-left: 10px; margin: auto; } .popup .show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; } 

 <div style="display"> <div id="divOperationMessage" style="display2"> ---------content inside--------- </div> <div> <a id="myPopup" href="#" onclick="myFunction()">Click</a> </div> </div> <script> // When the user clicks on div, open the popup function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); } </script>