html如何写带样式的弹窗

admin
行业动态
2024-04-03
4909

要创建一个带样式的弹窗，可以使用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" >
    <div >
        <span >&times;</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，你将看到一个带有样式的弹窗，点击弹窗外的区域或关闭按钮可以关闭弹窗。