html如何写出有两个按钮的弹窗的代码
时间: 2024-05-15 17:17:11 浏览: 2
以下是一个简单的 HTML 弹窗,包含两个按钮:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹窗</title>
</head>
<body>
<button onclick="openDialog()">打开弹窗</button>
<div id="dialog" style="display: none;">
<p>这是一个弹窗。</p>
<button onclick="alert('你点击了确定!')">确定</button>
<button onclick="closeDialog()">取消</button>
</div>
<script>
function openDialog() {
document.getElementById("dialog").style.display = "block";
}
function closeDialog() {
document.getElementById("dialog").style.display = "none";
}
</script>
</body>
</html>
```
你可以将此代码复制到任何 HTML 编辑器中运行,并单击“打开弹窗”按钮查看效果。
相关问题
html如何写出有两个按钮的弹窗的代码,一个按钮叫”confirm“,一个叫“cancel”
以下是一个简单的通过html实现带有两个按钮的弹出框的代码:
```
<!DOCTYPE html>
<html>
<head>
<title>弹出框</title>
</head>
<body>
<button onclick="myFunction()">打开弹出框</button>
<script>
function myFunction() {
var result = confirm("你确定要执行此操作吗?");
if (result == true) {
alert("你点击了确认按钮!");
} else {
alert("你点击了取消按钮!");
}
}
</script>
</body>
</html>
```
在这个例子中,我们使用了JavaScript的confirm()函数来显示带有“确认”和“取消”两个按钮的弹出框。当用户点击其中一个按钮时,我们可以根据用户的选择作出相应的反应。
用js写一个H5弹窗代码
以下是一个简单的H5弹窗代码:
HTML部分:
```html
<div id="popup" class="popup">
<div class="popup-content">
<div class="popup-header">
<h2>弹窗标题</h2>
<span class="close-btn" onclick="closePopup()">X</span>
</div>
<div class="popup-body">
<p>这是弹窗内容</p>
</div>
<div class="popup-footer">
<button onclick="closePopup()">关闭</button>
</div>
</div>
</div>
```
CSS部分:
```css
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
width: 400px;
padding: 20px;
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.popup-header h2 {
margin: 0;
}
.close-btn {
cursor: pointer;
font-size: 20px;
}
.popup-body {
margin-bottom: 20px;
}
.popup-footer {
text-align: right;
}
```
JavaScript部分:
```javascript
function openPopup() {
document.getElementById("popup").style.display = "block";
}
function closePopup() {
document.getElementById("popup").style.display = "none";
}
```
这个H5弹窗代码包含一个弹窗的HTML结构,以及用CSS样式控制弹窗的样式,还有两个JavaScript函数用于打开和关闭弹窗。可以通过在需要弹窗的地方调用openPopup()函数来打开弹窗,通过在弹窗中的关闭按钮或者关闭按钮调用closePopup()函数来关闭弹窗。