html和JS写一个弹窗
时间: 2023-12-06 10:45:12 浏览: 26
HTML和JS可以结合起来实现一个弹窗,下面是一个简单的示例代码:
HTML部分:
```html
<button onclick="openDialog()">打开弹窗</button>
<div class="dialog" id="myDialog">
<div class="dialog-content">
<span class="close" onclick="closeDialog()">×</span>
<p>这是一个弹窗</p>
</div>
</div>
```
JS部分:
```javascript
function openDialog() {
var dialog = document.getElementById("myDialog");
dialog.style.display = "block";
}
function closeDialog() {
var dialog = document.getElementById("myDialog");
dialog.style.display = "none";
}
```
CSS部分:
```css
.dialog {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.dialog-content {
background-color: white;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
```
以上代码实现了一个简单的弹窗,当点击按钮时会显示弹窗,点击关闭按钮或者弹窗外部的黑色背景时可以关闭弹窗。需要注意的是,在CSS中设置了弹窗的样式,其中`display: none`表示默认不显示,需要通过JS设置为`display: block`才能显示出来。