玩转JS，定制你的专属弹窗界面！

2023-05-15 02:02:13

使用 JS 实现自定义弹窗：赋能你的前端项目

在前端开发中，弹窗是一种必不可少的工具，它可以显著提升用户体验并实现各种交互。借助 JavaScript（JS）的强大功能，你可以轻松创建出令人惊叹的自定义弹窗，让你的项目脱颖而出。

创建弹窗元素

首先，创建一个 DIV 元素作为弹窗容器。使用 classList 添加一个类名，以便于通过 CSS 样式化弹窗。最后，将该元素添加到文档体中。

const modal = document.createElement('div');
modal.classList.add('modal');
document.body.appendChild(modal);

填充弹窗内容

接下来，为弹窗填充内容，可以是任何 HTML 代码，包括标题、文本、图片或按钮。

const modalContent = `
  <h1>弹窗标题</h1>
  <p>弹窗内容</p>
  <button class="close-modal">关闭</button>
`;
modal.innerHTML = modalContent;

设置样式

使用 CSS 为弹窗设置样式，包括位置、大小、背景色和布局。确保将弹窗元素固定在屏幕中央，并使其占据整个屏幕，以便于遮盖底层内容。

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  width: 500px;
}

.close-modal {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

显示和隐藏弹窗

显示弹窗：

使用 show() 方法直接显示弹窗。
使用 Promise 控制显示，以便在弹窗显示后执行其他操作。

// 直接显示弹窗
modal.show();

// 使用 Promise 显示弹窗
const promise = new Promise((resolve, reject) => {
  modal.show();
  resolve();
});

promise.then(() => {
  // 弹窗已显示
});

隐藏弹窗：

使用 hide() 方法直接隐藏弹窗。
使用 Promise 控制隐藏，以便在弹窗隐藏后执行其他操作。

// 直接隐藏弹窗
modal.hide();

// 使用 Promise 隐藏弹窗
const promise = new Promise((resolve, reject) => {
  modal.hide();
  resolve();
});

promise.then(() => {
  // 弹窗已隐藏
});

自定义弹窗交互

JS 弹窗的强大之处在于其灵活性。你可以根据自己的需求，自定义弹窗的外观、功能和交互方式。例如：