巧用ES6，制作底部浮现弹窗，超简单！

2024-01-30 11:49:49

嗨，各位前端朋友们，今天我要隆重介绍一款超级牛B的小点心——底部浮现弹窗！相信每个前端都应该接触过这种效果，而且它也是非常流行的交互方式。这种弹窗的使用场景主要出现在移动端，比如当你点击某个按钮时，底部会弹出一个窗口，里面包含了一些额外的信息或操作选项。

为了帮助大家摆脱为这种效果而反复编写代码的烦恼，我特此写了这个【底部浮现弹窗】小插件。它不仅使用简单，而且可以轻松实现各种交互效果。那么废话不多说，让我们一起开始吧！

1. HTML结构

首先，我们需要创建一个基本的HTML结构来容纳我们的弹窗。代码如下：

<div id="modal-container">
  <div id="modal">
    <div id="modal-content">
      <h1>弹窗标题</h1>
      <p>弹窗内容</p>
      <button id="close-button">关闭</button>
    </div>
  </div>
</div>

这个HTML结构很简单，它包含了一个容器div（#modal-container）、一个弹窗div（#modal）和一个内容div（#modal-content）。弹窗标题和内容放置在内容div中，而关闭按钮则放置在最底部。

2. CSS样式

接下来，我们需要为我们的弹窗添加一些CSS样式。代码如下：

#modal-container {
  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;
  opacity: 0;
  pointer-events: none;
}

#modal {
  position: relative;
  width: 300px;
  max-width: 90%;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(100%);
  transition: all 0.3s ease-out;
}

#modal-content {
  padding: 20px;
}

#close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
  cursor: pointer;
}

#modal-container.show {
  opacity: 1;
  pointer-events: auto;
}

#modal.show {
  transform: translateY(0);
}

这些样式定义了弹窗的布局、外观和动画效果。值得注意的是，我使用了一个名为“.show”的CSS类来控制弹窗的显示和隐藏。当“.show”类被添加到#modal-container和#modal元素时，弹窗就会显示出来，否则就会隐藏起来。

3. JavaScript代码

最后，我们需要编写一些JavaScript代码来控制弹窗的显示和隐藏。代码如下：

const modalContainer = document.getElementById('modal-container');
const modal = document.getElementById('modal');
const closeButton = document.getElementById('close-button');

// 显示弹窗
const showModal = () => {
  modalContainer.classList.add('show');
  modal.classList.add('show');
};

// 隐藏弹窗
const hideModal = () => {
  modalContainer.classList.remove('show');
  modal.classList.remove('show');
};

// 关闭按钮点击事件
closeButton.addEventListener('click', hideModal);

// 点击其他区域关闭弹窗
modalContainer.addEventListener('click', (e) => {
  if (e.target === modalContainer) {
    hideModal();
  }
});