利用html+js触发弹窗事件

CodeAE

一个简单的小案例，利用html+JavaScript触发弹窗事件
QQ图片20230420155330.png

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 = "&times;";
            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[i];
                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);
        }

效果演示

[Html/CSS] 利用html+js触发弹窗事件

相关帖子

html+Js获取当前时间代码

常用JavaScript的注释方法示例

nginx启ssi方法，宝塔面板nginx开启ssi

怎么在JavaScript中加注释

常用HTML网页跳转的几种方法

uni-app 利用canvas画简单海报并保存图片

CSS3荧光灯文字闪烁动画特效

php实现超简的分页功能

利用HTML、CSS和JS制作随机密码生成器

javascript如何改变背景

CodeAE LV9