使用Javascript做一个网页弹窗
时间: 2024-05-14 16:18:38 浏览: 65
JavaScript网站网页右下角弹窗公告内容弹窗可自定义内容附带跳转链接
5星 · 资源好评率100%
以下是一个简单的网页弹窗示例:
```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 文件中并在浏览器中打开,点击按钮即可显示弹窗。
阅读全文