写一个水平竖直居中的弹窗，带遮罩层的布局

实现一个水平竖直居中的弹窗，并带有遮罩层的布局，可以使用HTML、CSS和JavaScript来完成。以下是一个简单的示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>居中弹窗示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="overlay" class="overlay">
        <div id="modal" class="modal">
            <div class="modal-content">
                <span class="close-btn" onclick="closeModal()">&times;</span>
                <h2>弹窗标题</h2>
                <p>这是一个水平竖直居中的弹窗。</p>
                <button onclick="closeModal()">关闭</button>
            </div>
        </div>
    </div>
    <button id="openModalBtn">打开弹窗</button>

    <script src="scripts.js"></script>
</body>
</html>

CSS部分 (styles.css)

body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明遮罩层 */
    display: none; /* 初始隐藏 */
    justify-content: center;
    align-items: center;
}

.modal {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 100%;
    text-align: center;
}

.modal-content {
    position: relative;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
}

#openModalBtn {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

JavaScript部分 (scripts.js)

function openModal() {
    document.getElementById('overlay').style.display = 'flex';
}

function closeModal() {
    document.getElementById('overlay').style.display = 'none';
}

// 为打开弹窗按钮添加点击事件
document.getElementById('openModalBtn').addEventListener('click', openModal);

说明

  1. HTML部分：

    • #overlay 是遮罩层，初始状态为隐藏 (display: none)。
    • #modal 是弹窗，包含内容。
    • .close-btn 是关闭按钮，点击时调用 closeModal() 函数。
    • #openModalBtn 是打开弹窗的按钮，点击时调用 openModal() 函数。

  2. CSS部分：

    • .overlay 使用 position: fixed 固定在屏幕上，并设置 justify-content 和 align-items 来使内容居中。
    • .modal 设置背景颜色、内边距、边框半径和阴影效果，并限制最大宽度。
    • .close-btn 设置关闭按钮的位置和样式。

  3. JavaScript部分：

    • openModal() 函数显示遮罩层和弹窗。
    • closeModal() 函数隐藏遮罩层和弹窗。
    • 为打开弹窗按钮添加点击事件，调用 openModal() 函数。

这样，一个基本的水平竖直居中的弹窗带遮罩层的布局就完成了。你可以根据需要进一步美化和定制。

posted @ 2024-12-15 09:21  王铁柱6  阅读(84)  评论(0)    收藏  举报