点击按钮弹出弹窗 弹窗内容为测试文本 弹窗带两个按钮 分别为同意和不同意 点击同意按钮跳转baidu.com 点击不同意则关闭当前网页 并且美化弹窗
时间: 2024-02-13 14:05:21 浏览: 158
以下是一个实现你要求的 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();
}
```
这个代码可以在浏览器中运行,并且点击按钮可以打开一个美化后的弹窗。在弹窗中,用户可以选择同意或不同意,点击同意按钮会跳转到百度,点击不同意按钮会关闭当前网页。
阅读全文