首页js弹出div并显示遮罩层完整代码

js弹出div并显示遮罩层完整代码

时间: 2023-08-31 20:11:29 浏览: 97

js 点击按钮弹出层

5星 · 资源好评率100%

代码非常简单，点击按钮能弹出一个遮罩层，如有不足，请继续补充

以下是一个完整的示例代码，可以直接在浏览器中运行： HTML 代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>弹出框示例</title> </head> <body> <button id="btn">点击弹出框</button> <div id="mask" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999; display: none;"></div> <div id="popup" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; display: none;"> <h2>弹出框</h2> <p>这是一个示例弹出框。</p> <button id="closeBtn">关闭</button> </div> <script src="popup.js"></script> </body> </html> ``` JavaScript 代码： ``` var btn = document.getElementById('btn'); var popup = document.getElementById('popup'); var mask = document.getElementById('mask'); var closeBtn = document.getElementById('closeBtn'); // 点击按钮显示弹出框和遮罩层 btn.addEventListener('click', function() { popup.style.display = 'block'; mask.style.display = 'block'; }); // 点击关闭按钮隐藏弹出框和遮罩层 closeBtn.addEventListener('click', function() { popup.style.display = 'none'; mask.style.display = 'none'; }); ``` 这样就可以实现一个简单的弹出框和遮罩层效果。

阅读全文