javascript实现弹出层效果

实现弹出层效果通常使用javascript的模态框（Modal）实现。以下是步骤：

步骤一：构建HTML结构

为弹出层准备一个HTML结构，该结构包括带有唯一标识符的背景层和弹出层本身。如下所示：

<div id="overlay">
    <div id="popup">
        <h2>这是弹出层标题</h2>
        <p>这是弹出层内容。</p>
        <button id="close">关闭</button>
    </div>
</div>

其中，id="overlay" 的 div 元素是占据全屏的一层背景，id="popup" 的 div 元素则是弹出层。

步骤二：添加CSS样式

为弹出层准备CSS样式，其中#overlay 代表背景层，#popup 代表弹出层，具体如下：

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
}

#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    max-width: 500px;
    background: #fff;
    padding: 20px;
    display: none;
}

步骤三：添加JavaScript代码

为弹出层添加JavaScript代码，实现显示/隐藏效果。

var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
var closeButton = document.getElementById("close");

// 显示弹出层
function openPopup() {
    overlay.style.display = "block";
    popup.style.display = "block";
}

// 隐藏弹出层
function closePopup() {
    overlay.style.display = "none";
    popup.style.display = "none";
}

// 点击背景层和关闭按钮，均触发关闭弹出层事件
overlay.addEventListener("click", closePopup);
closeButton.addEventListener("click", closePopup);

示范1：页面加载时显示弹出层

当页面加载后，自动显示弹出层：

window.onload = function() {
    openPopup();
};

示范2：按钮点击时显示弹出层

当用户点击一个按钮时，显示弹出层：

<button onclick="openPopup()">显示弹出层</button>