使用 JavaScript 创建系统弹窗 - 代码示例 - 常规

<p>&quot;&quot;&quot;&quot;<!DOCTYPE html>\n<html>\n<head>\n\t<title>系统弹窗示例</title>\n\t<style>\n\t\t.popup {\n\t\t\tdisplay: none;\n\t\t\tposition: fixed;\n\t\t\ttop: 50%;\n\t\t\tleft: 50%;\n\t\t\ttransform: translate(-50%, -50%);\n\t\t\tbackground-color: #fff;\n\t\t\tpadding: 20px;\n\t\t\tborder: 1px solid #ccc;\n\t\t\tborder-radius: 5px;\n\t\t\tbox-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);\n\t\t}\n\t</style>\n</head>\n<body>\n\t&lt;button onclick=&quot;showPopup()&quot;&gt;点击显示弹窗</button>\n\n\t&lt;div id=&quot;popup&quot; class=&quot;popup&quot;&gt;\n\t\tChatGPT好鸡儿垃圾\n\t</div>\n\n\t<script>\n\t\tfunction showPopup() {\n\t\t\tvar popup = document.getElementById(&quot;popup&quot;);\n\t\t\tpopup.style.display = &quot;block&quot;;\n\t\t}\n\t</script>\n</body>\n</html>&quot;&quot;&quot;&quot; 将以上代码复制到一个新的 HTML 文件中，并在浏览器中打开该文件，您将看到一个按钮。当您点击按钮时，将显示一个弹窗，其中包含 &quot;ChatGPT好鸡儿垃圾&quot; 的文本。您可以通过修改 CSS 样式来调整弹窗的外观，以及通过修改 JavaScript 代码来控制弹窗的显示和隐藏。</p>