比ant更丰富Modal组件功能实现示例详解

下面我将详细讲解“比ant更丰富Modal组件功能实现示例详解”的完整攻略。

背景

Modal是许多Web应用程序中不可或缺的组件，它可以在不离开当前页面的情况下展示内容。许多开源UI框架如Ant Design都提供了Modal组件，但它们的功能可能无法完全满足我们的需求。因此，我们需要自己开发高度自定义的Modal组件。

步骤

步骤1：定义Modal组件

该步骤中，我们需要定义Modal组件的外部容器和内部结构。我们可以通过以下代码实现一个简单的Modal组件：

<div class="modal" id="my-modal">
  <div class="modal__content">
    <div class="modal__header">
      <h1 class="modal__title">Modal标题</h1>
      <button class="modal__close" id="close-modal">✖</button>
    </div>
    <div class="modal__body">
      Modal内容
    </div>
    <div class="modal__footer">
      <button class="modal__button">取消</button>
      <button class="modal__button modal__button--primary">确定</button>
    </div>
  </div>
</div>

在此代码示例中，我们创建了一个具有以下内容的Modal组件：

• 外部容器使用类名 modal 和 id 属性 my-modal 定义。
• 模态框的头部有一个标题和一个关闭按钮。
• 模态框的主体中有内容。
• 模态框的底部有两个按钮，表示取消和确定。

步骤2：添加CSS样式

接下来，我们需要添加CSS样式以美化模态框。这里是一个基本的CSS示例：

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: none;
  background-color: rgba(0,0,0,0.5);
}
.modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
  width: 400px;
  max-width: 90%;
}
.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.modal__title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  padding: 0;
}
.modal__close {
  border: none;
  cursor: pointer;
  font-size: 24px;
  line-height: 24px;
  padding: 0;
  background-color: transparent;
}
.modal__close:hover {
  color: #999;
}
.modal__body {
  margin-bottom: 20px;
}
.modal__footer {
  display: flex;
  justify-content: flex-end;
}
.modal__button {
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  line-height: 24px;
  margin-left: 10px;
  padding: 8px 12px;
}
.modal__button--primary {
  background-color: #007bff;
  color: #fff;
}
.modal__button--primary:hover {
  background-color: #0069d9;
}

该代码示例说明了如何使我们的Modal组件具有以下特点：

• Modal组件是固定定位并占据整个屏幕。
• 模态框的主体水平和垂直居中。
• 模态框的内容具有圆角和阴影效果。
• 模态框的头部具有一个标题和一个可关闭按钮。
• 模态框的主体中有多个段落。
• 模态框的底部有两个按钮，表示取消和确定。

步骤3：实现JavaScript功能

现在我们开始实现Modal组件的JavaScript功能。在此示例中，我们假设我们将Modal组件加载到页面的按钮上，并创建一个名为 openModal 的全局函数来打开Modal。

const modal = document.getElementById('my-modal');
const modalOpen = document.getElementById('modal-open');
const modalClose = document.getElementById('close-modal');

function openModal() {
  modal.style.display = 'block';
}

function closeModal() {
  modal.style.display = 'none';
}

modalOpen.addEventListener('click', openModal);
modalClose.addEventListener('click', closeModal);

在此代码示例中，我们执行以下操作：

• 将模态框元素存储在 modal 变量中。
• 将打开模态框的元素存储在 modalOpen 变量中。
• 将关闭模态框的元素存储在 modalClose 变量中。
• 创建一个名为 openModal 的函数，该函数将显示模态框。
• 创建一个名为 closeModal 的函数，该函数将隐藏模态框。
• 使用 addEventListener 函数附加打开和关闭模态框的事件监听器。

示例1：登录表单Modal

以上是一个基本Modal的实现，但是在开发中往往需要更便捷、更具业务逻辑的Modal。下面我们来看一个实例。

1.需求描述

点击页面右上角登录按钮后，在页面中央弹出登录表单Modal，输入用户名和密码后可以登录。

2.实现步骤

第1步：定义HTML结构

<!-- modal登录表单 -->
<div class="modal" id="login-modal">
  <form class="modal__form">
    <div class="modal__header">
      <h2 class="modal__title">登录</h2>
      <button class="modal__close" id="close-login-modal">×</button>
    </div>
    <div class="modal__body">
      <input type="text" placeholder="用户名" id="login-username">
      <input type="password" placeholder="密码" id="login-password">
    </div>
    <div class="modal__footer">
      <button type="button" class="modal__button" id="login-btn">登录</button>
    </div>
  </form>
</div>

第2步：添加CSS样式

.modal__form {
  width: 350px;
  margin: 0 auto;
}
.modal__form input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.modal__form input:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
}

第3步：添加JS代码

const loginModal = document.getElementById('login-modal');
const openLoginModal = document.getElementById('open-login-modal');
const closeLoginModal = document.getElementById('close-login-modal');

function openLoginModal() {
  loginModal.style.display = 'block';
}

function closeLoginModal() {
  loginModal.style.display = 'none';
}

openLoginModal.addEventListener('click', openLoginModal);
closeLoginModal.addEventListener('click', closeLoginModal);

const loginBtn = document.getElementById('login-btn');
const loginUsername = document.getElementById('login-username');
const loginPassword = document.getElementById('login-password');

function loginUser() {
  const username = loginUsername.value;
  const password = loginPassword.value;
  // Todo: Send the login form data to the server and handle the response.
  console.log(`The user ${username} try to login with password ${password}.`);
  closeLoginModal();
}

loginBtn.addEventListener('click', loginUser);

在此示例中，我们执行以下操作：

• 创建了一个新的模态框，其中包含一个表单、输入框和登录按钮。
• 在CSS样式中添加了新的样式以显示表单和输入框。
• 创建了一个名为 openLoginModal 的函数，该函数将显示Modal。
• 创建了一个名为 closeLoginModal 的函数，该函数将隐藏Modal。
• 使用 addEventListener 函数附加打开和关闭模态框的事件监听器。
• 为 "登录" 按钮添加了一个名为 loginUser 的事件处理程序。
• 在 loginUser 函数中处理了表单数据，该函数可以向服务器发送数据并处理响应。

示例2：可滚动Modal

在上面的示例中，我们已经说明了如何创建一个简单的Modal组件，以及通过一个示例展示了如何实现高度业务逻辑的Modal组件。下面我们再来看一个更实用的操作，如何制作可滚动的Modal。

1.需求描述

在移动设备上，Modal组件可能无法完全放入屏幕中，因此需要一个可滚动的Modal组件，以便用户可以在模态框中浏览内容。

2.实现步骤

第1步：定义HTML结构

<!-- modal登录表单 -->
<div class="modal" id="scroll-modal">
  <div class="modal__content">
    <div class="modal__header">
      <h2 class="modal__title">可滚动模态框</h2>
      <button class="modal__close" id="close-scroll-modal">×</button>
    </div>
    <div class="modal__body modal__body--scrollable">
      <h3>第1节</h3>
      <p>这是模态框的第1节内容。你可以在模态框中滚动查看它。</p>
      <h3>第2节</h3>
      <p>这是模态框的第2节内容。你可以在模态框中滚动查看它。</p>
      <h3>第3节</h3>
      <p>这是模态框的第3节内容。你可以在模态框中滚动查看它。</p>
      <h3>第4节</h3>
      <p>这是模态框的第4节内容。你可以在模态框中滚动查看它。</p>
      <h3>第5节</h3>
      <p>这是模态框的第5节内容。你可以在模态框中滚动查看它。</p>
      <h3>第6节</h3>
      <p>这是模态框的第6节内容。你可以在模态框中滚动查看它。</p>
      <h3>第7节</h3>
      <p>这是模态框的第7节内容。你可以在模态框中滚动查看它。</p>
      <h3>第8节</h3>
      <p>这是模态框的第8节内容。你可以在模态框中滚动查看它。</p>
      <h3>第9节</h3>
      <p>这是模态框的第9节内容。你可以在模态框中滚动查看它。</p>
      <h3>第10节</h3>
      <p>这是模态框的第10节内容。你可以在模态框中滚动查看它。</p>
    </div>
  </div>
</div>

第2步：添加CSS样式

.modal__body--scrollable {
  max-height: 400px;
  overflow-y: auto;
}

第3步：添加JS代码

const scrollModal = document.getElementById('scroll-modal');
const openScrollModal = document.getElementById('open-scroll-modal');
const closeScrollModal = document.getElementById('close-scroll-modal');

function openScrollModal() {
  scrollModal.style.display = 'block';
}

function closeScrollModal() {
  scrollModal.style.display = 'none';
}

openScrollModal.addEventListener('click', openScrollModal);
closeScrollModal.addEventListener('click', closeScrollModal);

在此示例中，我们采取以下方式：

• 创建新的Modal元素，该元素具有具有可滚动的主体。
• 在CSS样式中添加了新的样式以启用模态框滚动。
• 创建了一个名为 openScrollModal 的函数，该函数将显示Modal。
• 创建了一个名为 closeScrollModal 的函数，该函数将隐藏Modal。
• 使用 addEventListener 函数附加打开和关闭模态框的事件监听器。

总结

以上是使用HTML、CSS和JavaScript创建自定义Modal的完整攻略。在实施时，需要基于具体场景对Modal组件进行适当修改和拓展。该攻略可以作为开发人员实现高度自定义Modal组件的参考。