Vue-Demo-Modal Box

最新推荐文章于 2024-06-11 11:50:40 发布

weixin_45368324

最新推荐文章于 2024-06-11 11:50:40 发布

阅读量246

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45368324/article/details/106465827

版权

本文介绍了使用 Vue 开发模态框的案例，包括展示效果图和具体的实现过程。

摘要由CSDN通过智能技术生成

模态框案例

效果图

在这里插入图片描述

实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <style>
        .bg {
            /*display: flex;*/
            /*justify-content: center;*/
            /*align-items: center;*/
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: darkgray;
        }

        .bg .mask {
            width: 350px;
            height: 250px;
            background: #ffffff;
            position: absolu