Vue3 实现模态框组件
Vue3 实现模态框组件
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，以隐藏它们。在处理遮罩层单击事件时，判断当前点击的元素是否为遮罩层本身，如果是，则关闭模态框。
通过这个示例，可以实现一个简单的模态框，并且单击遮罩层可关闭模态框。
