Vue3 实现模态框组件

基于 Vue 3 实现模态框，并且单击遮罩层可关闭模态框

下面是一个基于 Vue 3 实现的模态框，并且点击遮罩层可关闭模态框的示例代码：

<template><div class="modal-wrapper" v-show="visible" @click.self="closeModal"><div class="modal"><div class="header"><h2>{{ title }}</h2><button @click="closeModal">X</button></div><div class="content"><slot></slot></div></div></div>
</template><script>import { ref } from "vue";export default {name: "Modal",props: {title: {type: String,required: true,},},setup(props, { emit }) {const visible = ref(false);const openModal = () => {visible.value = true;};const closeModal = () => {visible.value = false;emit("close");};return {visible,openModal,closeModal,};},};
</script><style scoped>.modal-wrapper {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;z-index: 9999;}.modal {background-color: white;padding: 20px;border-radius: 5px;}.header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}.header h2 {margin: 0;}.header button {border: none;background-color: transparent;font-size: 20px;cursor: pointer;}.content {max-height: 400px;overflow: auto;}
</style>

在这个示例中，定义了一个名为 Modal 的组件，并且通过 props 属性接收了一个 title 属性，表示模态框的标题。在 setup 函数中，使用 ref 函数创建了一个名为 visible 的响应式数据，表示模态框是否可见。还定义了 openModal 和 closeModal 函数，分别用于打开和关闭模态框，并且通过 emit 函数触发了一个 close 事件，以便在模态框关闭时可以执行其他操作。

在模板中，使用 v-show 指令根据 visible 的值来控制模态框的显示和隐藏。还在外层包裹了一个 div 元素，并且使用了 @click.self 修饰符来监听单击遮罩层的事件，并且调用了 closeModal 函数来关闭模态框。在模态框内部，使用了插槽来动态渲染模态框的内容，并且在头部添加了一个关闭按钮，以便用户手动关闭模态框。

最后，在样式中定义了模态框的样式，包括遮罩层、模态框头部、模态框内容等。通过这个示例，可以实现一个简单的模态框，并且单击遮罩层可关闭模态框。

基于原生 JavaScript、HTML、CSS 实现模态框，并且单击遮罩层可关闭模态框

下面是一个基于原生 JavaScript、HTML、CSS 实现的模态框，并且单击遮罩层可关闭模态框的示例代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Modal Dialog</title><style>.modal-overlay {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 9999;}.modal {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: white;padding: 20px;border-radius: 5px;z-index: 10000;}.modal-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}.modal-header h2 {margin: 0;}.modal-close {border: none;background-color: transparent;font-size: 20px;cursor: pointer;}</style></head><body><button id="openModalBtn">Open Modal</button><div class="modal-overlay" id="modalOverlay"><div class="modal" id="modal"><div class="modal-header"><h2>Modal Header</h2><button class="modal-close" id="modalCloseBtn">X</button></div><div class="modal-body"><p>Modal content goes here.</p></div></div></div><script>const openModalBtn = document.getElementById("openModalBtn");const modalOverlay = document.getElementById("modalOverlay");const modal = document.getElementById("modal");const modalCloseBtn = document.getElementById("modalCloseBtn");openModalBtn.addEventListener("click", () => {modalOverlay.style.display = "block";modal.style.display = "block";});modalCloseBtn.addEventListener("click", () => {modalOverlay.style.display = "none";modal.style.display = "none";});modalOverlay.addEventListener("click", (event) => {if (event.target === modalOverlay) {modalOverlay.style.display = "none";modal.style.display = "none";}});</script></body>
</html>

在这个示例中，通过 HTML 定义了一个按钮和一个模态框，模态框包括一个遮罩层和一个内部内容区域。在 CSS 中，定义了遮罩层和模态框的样式，并且使用了 display: none 将它们初始隐藏。

在 JavaScript 中，首先获取了需要操作的 DOM 元素。在打开模态框时，将遮罩层和模态框的 display 属性设置为 block，以显示它们。在关闭模态框时，将它们的 display 属性设置为 none，以隐藏它们。在处理遮罩层单击事件时，判断当前点击的元素是否为遮罩层本身，如果是，则关闭模态框。

通过这个示例，可以实现一个简单的模态框，并且单击遮罩层可关闭模态框。