(css)原生html实现遮罩层弹窗

**原生HTML实现遮罩层弹窗**

在网页开发中，遮罩层弹窗是非常常见的UI组件。它可以用来提示用户、获取用户输入等。在本文中，我们将使用原生的HTML和CSS技术来实现一个简单的遮罩层弹窗。

**遮罩层弹窗的基本结构**

遮罩层弹窗通常由以下几个部分组成：

* **遮罩层**:一个透明的背景层，覆盖整个页面，以阻止用户与其他元素交互。
* **弹窗内容**:一个包含具体信息或输入表单的容器。

**HTML结构**

首先，我们需要定义遮罩层和弹窗内容的HTML结构。我们可以使用以下代码：

html<!-- 遮罩层 -->
<div id="mask" class="mask"></div>

<!-- 弹窗内容 -->
<div id="popup" class="popup">
 <h2>提示信息</h2>
 <p>这是一个遮罩层弹窗。</p>
 <button id="close-btn">关闭</button>
</div>

在上面的代码中，我们定义了两个DIV元素：`mask`和`popup`。`mask`用于作为遮罩层，而`popup`则是弹窗内容的容器。

**CSS样式**

接下来，我们需要为遮罩层和弹窗内容添加CSS样式，以实现它们的外观和行为。

css/* 遮罩层 */
.mask {
 position: fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-color: rgba(0,0,0,0.5);
 z-index:1;
}

/* 弹窗内容 */
.popup {
 position: absolute;
 top:50%;
 left:50%;
 transform: translate(-50%, -50%);
 width:300px;
 background-color: #fff;
 padding:20px;
 border-radius:10px;
 box-shadow:0010px rgba(0,0,0,0.2);
}

/* 弹窗关闭按钮 */
#close-btn {
 position: absolute;
 top:10px;
 right:10px;
 background-color: #fff;
 border: none;
 padding:5px10px;
 font-size:16px;
 cursor: pointer;
}

在上面的CSS代码中，我们定义了遮罩层和弹窗内容的样式。遮罩层使用`fixed`定位，覆盖整个页面，而弹窗内容则使用`absolute`定位，居于页面中心。

**JavaScript交互**

最后，我们需要添加JavaScript代码，以实现遮罩层弹窗的交互行为。

javascript// 获取遮罩层和弹窗内容的DOM元素const mask = document.getElementById('mask');
const popup = document.getElementById('popup');

// 添加事件监听器，监听页面点击事件document.addEventListener('click', (e) => {
 // 如果点击的是遮罩层或弹窗关闭按钮，则隐藏遮罩层和弹窗内容 if (e.target === mask || e.target === document.getElementById('close-btn')) {
 mask.style.display = 'none';
 popup.style.display = 'none';
 }
});

// 添加事件监听器，监听页面滚动事件window.addEventListener('scroll', () => {
 // 如果页面滚动到顶部，则显示遮罩层和弹窗内容 if (window.scrollY ===0) {
 mask.style.display = 'block';
 popup.style.display = 'block';
 }
});

在上面的JavaScript代码中，我们添加了事件监听器，监听页面点击事件和滚动事件。根据这些事件的触发情况，我们隐藏或显示遮罩层和弹窗内容。

**总结**

通过本文的示例，我们可以实现一个简单的遮罩层弹窗。这个遮罩层弹窗使用原生的HTML和CSS技术，能够在页面中显示提示信息或获取用户输入。同时，它也支持基本的交互行为，如关闭按钮和滚动事件。

**参考**

* [MDN Web Docs - CSS]( />* [MDN Web Docs - JavaScript](