创建响应式模态框

简介

在这个项目中，你将学习如何创建一个可以在网页上显示和隐藏的模态框组件。模态框在 Web 应用程序中通常用于显示额外的内容或表单，而无需离开当前页面。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何为模态框设置 HTML 结构
• 如何实现显示和隐藏模态框的功能
• 如何处理事件冒泡，以防止模态框在隐藏后再次显示

🏆 成果

完成这个项目后，你将能够：

• 使用 HTML、CSS 和 JavaScript 创建一个模态框
• 使用 JavaScript 函数控制模态框的可见性
• 防止事件冒泡，以确保模态框按预期运行

Skills Graph

设置项目结构

在这一步中，你将设置项目文件和结构。按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── bootstrap.min.css
├── bootstrap.min.js
├── index.html
├── jquery.min.js
└── style.css

点击 WebIDE 右下角的Go Live按钮来运行项目。

接下来，在虚拟机顶部打开“Web 8080”并手动刷新以查看页面。

实现显示和隐藏功能

在这一步中，你将学习如何实现显示和隐藏模态框的功能。

1. 在 index.html 文件底部找到 <script> 部分。
2. 在 <script> 部分中，你会找到以下代码：

// TODO
let signModalDoc = document.querySelector("#myModal");
function handleClick(e) {
  signModalDoc.style.display = "block";
  event.stopPropagation();
}
function handleOk(e) {
  signModalDoc.style.display = "none";
  event.stopPropagation();
}

3. 理解每个函数的用途：

   • handleClick(e)：当点击“立即注册”按钮时调用此函数。它将模态框的 display 属性设置为 'block'，这会使模态框可见。
   • handleOk(e)：当点击模态框内的关闭“X”按钮或“确定”按钮时调用此函数。它将模态框的 display 属性设置为 'none'，这会隐藏模态框。

4. 两个函数中的 event.stopPropagation() 行用于防止点击事件冒泡到父元素，否则可能会导致模态框在隐藏后再次显示。

测试功能

1. 保存 index.html 文件。
2. 在浏览器中刷新网页。
3. 点击“立即注册”按钮，查看模态框出现。
4. 点击模态框内的关闭“X”按钮或“确定”按钮，查看模态框消失。最终效果应如下所示：

恭喜你！你已成功实现了模态框的显示和隐藏功能。

总结

恭喜你！你已完成此项目。你可以在 LabEx 中练习更多实验以提升你的技能。