当前位置：首页 > 行业动态 > 正文

如何设置弹窗样式html

admin
行业动态
2024-03-30
4294

设置弹窗样式的HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>弹窗样式设置</title>
    <style>
        /* 弹窗样式 */
        .modal {
            display: none; /* 默认隐藏弹窗 */
            position: fixed; /* 固定弹窗位置 */
            zindex: 1; /* 设置弹窗层级 */
            left: 0;
            top: 0;
            width: 100%; /* 宽度为100% */
            height: 100%; /* 高度为100% */
            overflow: auto; /* 内容溢出时显示滚动条 */
            backgroundcolor: rgba(0,0,0,0.4); /* 背景颜色为半透明黑色 */
        }
        /* 弹窗内容样式 */
        .modalcontent {
            backgroundcolor: #fefefe; /* 背景颜色 */
            margin: 15% auto; /* 水平居中，垂直距离顶部15% */
            padding: 20px; /* 内边距 */
            border: 1px solid #888; /* 边框 */
            width: 80%; /* 宽度 */
            maxwidth: 600px; /* 最大宽度 */
        }
        /* 关闭按钮样式 */
        .close {
            color: #aaa; /* 字体颜色 */
            float: right; /* 向右浮动 */
            fontsize: 28px; /* 字体大小 */
            fontweight: bold; /* 字体加粗 */
        }
        .close:hover,
        .close:focus {
            color: black; /* 鼠标悬停或聚焦时字体颜色 */
            textdecoration: none; /* 去掉下划线 */
            cursor: pointer; /* 鼠标指针变为手形 */
        }
    </style>
</head>
<body>
    <!弹窗触发按钮 >
    <button id="openModal">打开弹窗</button>
    <!弹窗内容 >
    <div id="myModal" >
        <div >
            <span >&times;</span>
            <p>这里是弹窗的内容。</p>
        </div>
    </div>
    <!JavaScript代码 >
    <script>
        // 获取弹窗元素和触发按钮元素
        var modal = document.getElementById("myModal");
        var btn = document.getElementById("openModal");
        var span = document.getElementsByClassName("close")[0];
        // 点击触发按钮打开弹窗
        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";
            }
        }
    </script>
</body>
</html>