JS实现自定义弹窗功能

当用户操作的某些行为需要提示时，一般会使用弹窗（Modal）来提醒用户。JS实现自定义弹窗功能可以增强网站的交互体验，并且也有助于优化用户体验。

下面是JS实现自定义弹窗功能的完整攻略：

步骤一：创建弹窗模板

首先，我们需要创建一个弹窗模板，在这个模板中设置弹窗的样式、布局等。以下是一个简单的弹窗模板：

<div class="modal">
  <h3 class="modal__title">标题</h3>
  <div class="modal__content">
    <p>内容</p>
  </div>
  <div class="modal__actions">
    <button class="modal__action modal__action--cancel">取消</button>
    <button class="modal__action modal__action--confirm">确认</button>
  </div>
</div>
<div class="backdrop"></div>

其中，.modal 是弹窗的主体部分，.modal__title 是标题部分，.modal__content 是内容部分，.modal__actions 是操作部分。.modal__action--cancel 和 .modal__action--confirm 是取消按钮和确认按钮。

步骤二：JS控制显示和隐藏

我们需要编写JS代码来控制弹窗的显示和隐藏。以下是一个示例：

const modal = document.querySelector('.modal');
const backdrop = document.querySelector('.backdrop');
const cancelButton = document.querySelector('.modal__action--cancel');
const confirmButton = document.querySelector('.modal__action--confirm');

function showModal() {
  modal.classList.add('visible');
  backdrop.classList.add('visible');
}

function hideModal() {
  modal.classList.remove('visible');
  backdrop.classList.remove('visible');
}

function cancelHandler() {
  hideModal();
}

function confirmHandler() {
  hideModal();
}

backdrop.addEventListener('click', hideModal);
cancelButton.addEventListener('click', cancelHandler);
confirmButton.addEventListener('click', confirmHandler);

以上代码中，我们首先获取了弹窗模板中各个元素的引用，然后编写了 showModal 和 hideModal 方法来显示和隐藏弹窗。当点击取消按钮或背景时，会调用 hideModal 方法来隐藏弹窗。当点击确认按钮时，会先执行 confirmHandler 方法，然后再调用 hideModal 方法来隐藏弹窗。

步骤三：自定义弹窗的内容和样式

在上面的步骤中，我们创建了一个简单的弹窗模板，并用JS控制了其显示和隐藏。但是，这个弹窗的内容和样式还比较简陋。为了让弹窗更符合网站的设计风格，我们需要对其进行自定义。

以下是一个自定义弹窗的示例：

<div class="modal">
  <div class="modal__header">
    <h3 class="modal__title">删除文章</h3>
    <button class="modal__close">×</button>
  </div>
  <div class="modal__content">
    <p>你确定要删除此文章吗？</p>
  </div>
  <div class="modal__footer">
    <button class="modal__button modal__button--cancel">取消</button>
    <button class="modal__button modal__button--confirm">删除</button>
  </div>
</div>
<div class="backdrop"></div>

在这个自定义弹窗中，我们添加了 .modal__header 和 .modal__footer 来分别显示标题和按钮。在 .modal__header 中，我们增加了一个关闭按钮，可以让用户直接关闭弹窗。.modal__button--cancel 和 .modal__button--confirm 这两个类名与弹窗模板类似，只是进行了一些定制化的修改。

以下是自定义弹窗的JS代码：

const modal = document.querySelector('.modal');
const backdrop = document.querySelector('.backdrop');
const cancelButton = document.querySelector('.modal__button--cancel');
const confirmButton = document.querySelector('.modal__button--confirm');
const closeButton = document.querySelector('.modal__close');

function showModal() {
  modal.classList.add('visible');
  backdrop.classList.add('visible');
}

function hideModal() {
  modal.classList.remove('visible');
  backdrop.classList.remove('visible');
}

function cancelHandler() {
  hideModal();
}

function confirmHandler() {
  hideModal();
}

function closeHandler() {
  hideModal();
}

backdrop.addEventListener('click', hideModal);
cancelButton.addEventListener('click', cancelHandler);
confirmButton.addEventListener('click', confirmHandler);
closeButton.addEventListener('click', closeHandler);

在这个自定义弹窗的JS代码中，我们使用了 .modal__button--cancel 和 .modal__button--confirm 来代替之前的类名。在关闭按钮的事件处理函数中，我们也增加了对其的监听，并在 closeHandler 方法中调用 hideModal 方法来隐藏弹窗。

以上是JS实现自定义弹窗功能的完整攻略，可以根据自身需要进行定制化修改，在网站中增加更多交互效果。