要创建一个带样式的弹窗，可以使用HTML、CSS和JavaScript，以下是一个简单的示例：
（图片来源网络，侵删）
1、创建一个HTML文件，例如popup.html，并添加以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>带样式的弹窗</title>
<style>
/* 弹窗背景 */
.popup {
display: none;
position: fixed;
zindex: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
backgroundcolor: rgba(0, 0, 0, 0.4);
}
/* 弹窗内容 */
.popupcontent {
backgroundcolor: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* 关闭按钮 */
.close {
color: #aaa;
float: right;
fontsize: 28px;
fontweight: bold;
}
.close:hover,
.close:focus {
color: black;
textdecoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<!弹窗结构 >
<div id="myPopup" class="popup">
<div class="popupcontent">
<span class="close">×</span>
<h2>弹窗标题</h2>
<table>
<tr>
<th>小标题1</th>
<td>单元表格内容1</td>
</tr>
<tr>
<th>小标题2</th>
<td>单元表格内容2</td>
</tr>
</table>
</div>
</div>
<script>
// 获取弹窗元素
var popup = document.getElementById("myPopup");
// 获取关闭按钮元素
var closeBtn = document.getElementsByClassName("close")[0];
// 显示弹窗
function showPopup() {
popup.style.display = "block";
}
// 隐藏弹窗
function hidePopup() {
popup.style.display = "none";
}
// 当用户点击关闭按钮时，隐藏弹窗
closeBtn.onclick = function() {
hidePopup();
}
// 当用户点击弹窗外的区域时，隐藏弹窗
window.onclick = function(event) {
if (event.target == popup) {
hidePopup();
}
}
</script>
</body>
</html>
2、保存文件后，用浏览器打开popup.html，你将看到一个带有样式的弹窗，点击弹窗外的区域或关闭按钮可以关闭弹窗。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/427459.html
微信扫一扫