使用Javascript做一个网页弹窗

以下是一个简单的网页弹窗示例： ```html <!DOCTYPE html> <html> <head> <title>网页弹窗示例</title> <style type="text/css"> #popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: white; border: 1px solid black; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); z-index: 999; } </style> </head> <body> <button onclick="showPopup()">显示弹窗</button> <div id="popup"> <h2>弹窗标题</h2> <p>弹窗内容</p> <button onclick="hidePopup()">关闭弹窗</button> </div> <script type="text/javascript"> function showPopup() { document.getElementById("popup").style.display = "block"; } function hidePopup() { document.getElementById("popup").style.display = "none"; } </script> </body> </html> ``` 首先，在 HTML 中创建一个按钮和一个 div 元素，用于显示弹窗。div 元素设置了一个初始的 `display: none` 属性，使其在页面加载时隐藏。接下来，在 CSS 中设置 div 元素的样式，使其在页面中居中并显示为一个带有边框和阴影的白色框。最后，在 Javascript 中编写两个函数 `showPopup` 和 `hidePopup`，用于显示和隐藏弹窗。这些函数通过修改 div 元素的 `display` 属性来实现。将以上代码复制到一个 HTML 文件中并在浏览器中打开，点击按钮即可显示弹窗。

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通

使用Javascript做一个网页弹窗

最新推荐

JavaScript实现自动弹出窗口并自动关闭窗口的方法

####这是一篇对python的详细解析

菜日常菜日常菜日常菜日常

zigbee-cluster-library-specification

管理建模和仿真的文件

MATLAB柱状图在信号处理中的应用：可视化信号特征和频谱分析

用Spring boot和vue写一个登录注册界面

JSBSim Reference Manual

"互动学习：行动中的多样性与论文攻读经历"

MATLAB柱状图在数据分析中的作用：从可视化到洞察