ES6全新之通用弹窗应用

2024-02-22 22:49:11

在前端开发中，弹窗可谓是无处不在，无论是简单的提示框还是复杂的对话框，它们都是页面交互中不可或缺的一部分。在ES6中，我们可以通过规范的方式构建通用弹窗组件，从而节省时间、提高效率。

首先，我们先来了解一下通用弹窗的基本组成部分。一个通用弹窗通常包括以下几个元素：

标题栏：显示弹窗的标题
正文内容：显示弹窗的主体内容
按钮：用于操作弹窗，如关闭、确认、取消等
遮罩层：覆盖在页面上的半透明层，用于防止用户操作页面其他部分

有了这些基本元素，我们就可以开始构建通用弹窗组件了。

第一步，我们需要创建一个HTML结构。我们可以使用<div>元素来作为弹窗的容器，并在其中添加标题栏、正文内容和按钮。遮罩层也可以通过<div>元素来实现。

<div class="modal">
  <div class="modal-header">
    <h3 class="modal-title">提示</h3>
  </div>
  <div class="modal-body">
    <p>确定要删除该记录吗？</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary">确定</button>
    <button type="button" class="btn btn-secondary">取消</button>
  </div>
</div>
<div class="modal-backdrop"></div>

第二步，我们需要为弹窗组件添加样式。我们可以使用CSS来控制弹窗的布局、外观和动画效果。

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 500px;
  width: 80%;
  background-color: #fff;
  padding: 20px;
}

.modal-header {
  border-bottom: 1px solid #e9ecef;
}

.modal-title {
  font-size: 18px;
  font-weight: bold;
}

.modal-body {
  font-size: 14px;
}

.modal-footer {
  border-top: 1px solid #e9ecef;
  padding-top: 10px;
}

.btn-primary {
  margin-right: 10px;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
  z-index: 998;
}

第三步，我们需要为弹窗组件添加交互逻辑。我们可以使用JavaScript来控制弹窗的打开、关闭和动画效果。

const modal = document.querySelector('.modal');
const modalDialog = document.querySelector('.modal-dialog');
const modalBody = document.querySelector('.modal-body');
const btnOpenModal = document.querySelector('.btn-open-modal');
const btnCloseModal = document.querySelector('.btn-close-modal');

btnOpenModal.addEventListener('click', () => {
  modal.classList.add('show');
  modalDialog.classList.add('animated', 'fadeIn');
});

btnCloseModal.addEventListener('click', () => {
  modal.classList.remove('show');
  modalDialog.classList.remove('animated', 'fadeIn');
});

modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.classList.remove('show');
    modalDialog.classList.remove('animated', 'fadeIn');
  }
});