html的弹窗如何做出两个按钮
时间: 2024-05-09 19:17:40 浏览: 178
?
您可以使用 JavaScript 来创建带有两个按钮的弹窗。您可以使用 confirm() 或者 prompt() 方法创建带有两个按钮的弹窗。这些方法将返回一个布尔值或者用户输入的值。根据用户的响应,您可以执行相应的操作。例如:
```
let result = confirm("您确定要删除这个文件吗?");
if (result) {
// 用户点击了“确认”按钮
} else {
// 用户点击了“取消”按钮
}
```
```
let name = prompt("请输入你的名字:");
if (name) {
// 用户输入了名字
} else {
// 用户点击了“取消”按钮
}
```
希望这可以帮助您!
相关问题
点击按钮弹出弹窗 弹窗内容为测试文本 弹窗带两个按钮 分别为同意和不同意 点击同意按钮跳转baidu.com 点击不同意则关闭当前网页 并且美化弹窗
以下是一个实现你要求的 HTML 弹窗代码:
HTML 代码:
```
<button id="myBtn">打开弹窗</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>测试文本</p>
<div>
<button id="agreeBtn">同意</button>
<button id="disagreeBtn">不同意</button>
</div>
</div>
</div>
```
CSS 代码:
```
/* 弹窗按钮样式 */
#myBtn {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
}
/* 弹窗样式 */
.modal {
display: none; /* 默认隐藏弹窗 */
position: fixed; /* 固定定位 */
z-index: 1; /* 置于顶层 */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* 允许滚动 */
background-color: rgb(0,0,0); /* 半透明黑色背景 */
background-color: rgba(0,0,0,0.4); /* 半透明黑色背景 */
}
/* 弹窗内容样式 */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 弹窗上下居中 */
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* 弹窗关闭按钮样式 */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* 按钮样式 */
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin: 10px 5px;
}
button:hover {
background-color: #3e8e41;
}
button:active {
background-color: #3e8e41;
}
```
JavaScript 代码:
```
// 获取弹窗按钮、弹窗、关闭按钮、同意按钮和不同意按钮
var btn = document.getElementById("myBtn");
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
var agreeBtn = document.getElementById("agreeBtn");
var disagreeBtn = document.getElementById("disagreeBtn");
// 当用户点击按钮时,打开弹窗
btn.onclick = function() {
modal.style.display = "block";
}
// 当用户点击关闭按钮时,关闭弹窗
span.onclick = function() {
modal.style.display = "none";
}
// 当用户点击弹窗外部时,关闭弹窗
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// 当用户点击同意按钮时,跳转到百度
agreeBtn.onclick = function() {
window.location.href = "https://www.baidu.com/";
}
// 当用户点击不同意按钮时,关闭当前网页
disagreeBtn.onclick = function() {
window.close();
}
```
这个代码可以在浏览器中运行,并且点击按钮可以打开一个美化后的弹窗。在弹窗中,用户可以选择同意或不同意,点击同意按钮会跳转到百度,点击不同意按钮会关闭当前网页。
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()函数来显示带有“确认”和“取消”两个按钮的弹出框。当用户点击其中一个按钮时,我们可以根据用户的选择作出相应的反应。
阅读全文