弹窗暗层效果是实现模态框、弹出层等常见 UI 组件的核心功能。在前端开发中，如何使用 JavaScript 实现这种效果是必备技能之一。本文将详细介绍基于原生 JavaScript 实现弹窗暗层效果的方法，并提供示例代码，帮助读者深入理解该技术的实现原理和应用场景。
实现思路
弹窗暗层效果的实现思路可以分为两个步骤：创建遮罩层和控制遮罩层的显示与隐藏。
创建遮罩层
遮罩层是指一层半透明的背景层，可用于覆盖整个页面或部分区域，使用户无法与页面上其他元素进行交互。以下是基于原生 JavaScript 创建遮罩层的方法：
-- -------------------- ---- ------- -------- --------------- - ----- ------- - ------------------------------ -------------------------- ----------- ---------------------- - -------- ----------------- - -- ------------------- - -- -------------------- - -- ------------------ - -- ----------------------------- - -------- -- -- ------ -------------------- - ----- ------ -------- -
上述代码中，我们使用 document.createElement 方法创建了一个 div 元素，并设定其 id 为 overlay。接着，我们设置了 position: fixed，将该元素固定在页面上；同时，通过设置 top, right, bottom, left 四个属性的值为 0，使该元素填满整个页面。最后，我们设置了背景色为黑色半透明，并将该元素的层级设置为最大（9999），以保证其遮盖页面上其他元素。
控制遮罩层的显示与隐藏
创建遮罩层后，我们需要控制它的显示和隐藏，以实现弹窗暗层效果。以下是基于原生 JavaScript 控制遮罩层显示与隐藏的方法：
-- -------------------- ---- -------
-------- ------------- -
----- ------- - ---------------------------------- -- ----------------
-----------------------------------
-
-------- ------------- -
----- ------- - -----------------------------------
-- --------- -
-----------------------------------
-
-上述代码中，我们使用 document.getElementById 方法获取 id 为 overlay 的元素。如果该元素不存在，则调用 createOverlay 方法创建一个新的遮罩层元素，并添加到 body 上。接着，在 showOverlay 函数中，我们将遮罩层元素添加到 body 中，从而实现遮罩层的显示。在 hideOverlay 函数中，我们判断遮罩层元素是否存在，如果存在，则通过 document.body.removeChild 方法将其从页面中移除，从而实现遮罩层的隐藏。
应用示例
基于上述实现思路，我们可以在具体应用场景中使用 JavaScript 实现弹窗暗层效果。以下是一个示例代码，演示如何使用弹窗暗层效果实现简单的模态框组件：
-- -------------------- ---- ------- ----- ----- - --------------------------------- ----- ------- - -------------------------------------- ----- -------- - --------------------------------------- --------------------------------- -- -- - -------------- ------------------- - -------- --- ---------------------------------- -- -- - -------------- ------------------- - ------- ---
上述代码中，我们首先获取了模态框元素和触发打开和关闭模态框的按钮元素。接着，我们通过添加事件监听器，在用户点击
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1181