利用html+js触发弹窗事件
一个简单的小案例，利用html+JavaScript触发弹窗事件html代码示例：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showAlert() {
var message = "弹窗内容提示语";
var links = [
{
url: "https://www.codeae.com",
label: "弹窗链接1"
},
{
url: "https://www.codeae.com",
label: "弹窗链接2"
},
{
url: "https://www.codeae.com",
label: "弹窗链接3"
}
];
// 创建弹窗元素
var popup = document.createElement("div");
popup.setAttribute("id", "popup");
// 创建关闭按钮
var closeBtn = document.createElement("button");
closeBtn.setAttribute("id", "popup-close");
closeBtn.innerHTML = "×";
closeBtn.onclick = function() {
popup.parentNode.removeChild(popup);
};
popup.appendChild(closeBtn);
// 创建提示文字元素
var text = document.createElement("p");
text.innerHTML = message;
popup.appendChild(text);
// 创建链接列表
var linkList = document.createElement("ul");
for (var i = 0; i < links.length; i++) {
var link = links;
var listItem = document.createElement("li");
var linkElem = document.createElement("a");
linkElem.setAttribute("href", link.url);
linkElem.setAttribute("target", "_blank");
linkElem.innerHTML = link.label;
listItem.appendChild(linkElem);
linkList.appendChild(listItem);
}
popup.appendChild(linkList);
// 添加到页面中
document.body.appendChild(popup);
}
</script>
</head>
<body>
<p> <a onclick="showAlert()"style="text-decoration: none; color: #ff0000;cursor: pointer; font-size: 16px;">html弹窗事件</a></p>
</body>
</html>CSS样式示例：
#popup p{
font-size: 14px;
margin: 5px;
}
#popup a {
display: block;
padding: 10px;
border: 1px solid #ccc;
text-align: center;
text-decoration: none;
color: #f00;
font-weight: bold;
flex: 1;
font-size: 16px;
}
#popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border: 1px solid #ccc;
padding: 10px;
max-width: 80%;
max-height: 80%;
overflow: auto;
width: 400px;
height: 150px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
效果演示
页:
[1]