HTML & JS 实现背景虚化弹窗提示 - 代码示例

下面是一个简单的示例，展示了如何使用HTML和JS实现背景虚化和弹窗提示。\n\nHTML代码：\nhtml\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Blur Background and Popup</title>\n <link rel="stylesheet" href="style.css">\n</head>\n<body>\n <button id="openBtn">Open Popup</button>\n\n <div id="popup" class="popup">\n <div class="popup-content">\n <h2>Popup Content</h2>\n <p>This is the content of the popup.</p>\n <button id="closeBtn">Close</button>\n </div>\n </div>\n\n <div id="overlay" class="overlay"></div>\n\n <script src="script.js"></script>\n</body>\n</html>\n\n\nCSS代码（style.css）：\ncss\nbody {\n margin: 0;\n padding: 0;\n font-family: Arial, sans-serif;\n}\n\n.popup {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: white;\n padding: 20px;\n border-radius: 5px;\n z-index: 9999;\n display: none;\n}\n\n.popup-content {\n text-align: center;\n}\n\n.overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 9998;\n display: none;\n}\n\n\nJavaScript代码（script.js）：\njavascript\nvar openBtn = document.getElementById('openBtn');\nvar closeBtn = document.getElementById('closeBtn');\nvar popup = document.getElementById('popup');\nvar overlay = document.getElementById('overlay');\n\nopenBtn.addEventListener('click', function() {\n popup.style.display = 'block';\n overlay.style.display = 'block';\n document.body.style.overflow = 'hidden';\n});\n\ncloseBtn.addEventListener('click', function() {\n popup.style.display = 'none';\n overlay.style.display = 'none';\n document.body.style.overflow = 'auto';\n});\n\n\n这个示例中，点击"Open Popup"按钮会显示一个弹窗，并将背景虚化。弹窗中包含标题、内容和一个关闭按钮。点击关闭按钮会隐藏弹窗并取消背景虚化。\n\n注意：为了实现背景虚化，我们使用了一个覆盖整个页面的透明黑色背景（overlay）。当弹窗显示时，overlay会显示，并将页面内容模糊化。