JavaScrit工具函数如何实现模态框的弹出和关闭
JavaScript工具函数如何实现模态框的弹出和关闭
模态框是一种常见的用户界面元素，可以在网页中实现弹出窗口的效果，通常用于显示重要信息、提示用户进行操作或展示更多内容。在JavaScript中，我们可以通过编写工具函数来实现模态框的弹出和关闭，使其具备更好的交互性和用户体验。
一、模态框的弹出
要实现模态框的弹出功能，我们首先需要编写一个工具函数openModal，该函数可以接收一个模态框元素的选择器作为参数，然后通过DOM操作，将该模态框元素显示出来并给其添加合适的样式。下面是openModal函数的基本实现：
```javascript
function openModal(selector) {
  const modal = document.querySelector(selector);
  modal.style.display = "block";
}
```
在这段代码中，我们使用了document.querySelector函数来选择指定的模态框元素，并将其display属性设置为"block"，从而使其显示出来。
为了实现更好的用户体验，我们还可以在打开模态框时，禁用背后的页面内容滚动，并在模态框之外点击时，自动关闭模态框。下面是完善后的openModal函数的实现：
自动弹窗代码
```javascript
function openModal(selector) {
  const modal = document.querySelector(selector);
  const body = document.body;
  modal.style.display = "block";
  body.style.overflow = "hidden"; // 禁用页面滚动
  modal.addEventListener("click", function (event) {
    if (event.target === modal) {
      closeModal(selector);
    }
  });
}
```
在这个改进的版本中，我们在打开模态框时，使用body.style.overflow属性将页面滚动禁用，避免用户在模态框打开时可以滚动页面。同时，我们还添加了一个事件，当用户
点击模态框之外的区域时，自动关闭模态框。
二、模态框的关闭
接下来，我们需要编写一个工具函数closeModal，用于关闭模态框。该函数同样接收一个模态框元素的选择器作为参数，然后通过DOM操作，将该模态框元素隐藏起来，恢复背后页面的滚动功能。下面是closeModal函数的基本实现：
```javascript
function closeModal(selector) {
  const modal = document.querySelector(selector);
  const body = document.body;
  modal.style.display = "none";
  body.style.overflow = ""; // 恢复页面滚动
}
```
在这段代码中，我们只需将模态框元素的display属性设置为"none"，即可使其隐藏起来。同时，将body.style.overflow属性恢复为空字符串，以恢复页面的滚动功能。
三、使用示例
有了openModal和closeModal这两个工具函数，我们可以在需要的时候方便地弹出和关闭模态框。下面是一个使用示例：
```html
<!DOCTYPE html>
<html>
  <head>
    <title>示例页面</title>
   
    <style>
      /* 模态框样式 */
      .modal {
        display: none;