简单通用的模态框

在学习使用vue和element的封装插件的时候，我们经常要写模态框的一个样式，那么，我觉的最简单的也就是下面这种，值得以后常用。<style>*{margin: 0;padding: 0;}.mask {position: fixed;...

honghong.zhou

7352人浏览 · 2018-09-02 10:05:26

honghong.zhou · 2018-09-02 10:05:26 发布

在学习使用vue和element的封装插件的时候，我们经常要写模态框的一个样式，那么，我觉的最简单的也就是下面这种，值得以后常用。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .mask {
            position: fixed;
            z-index: 1000;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background: rgba(0, 0, 0, .4)
        }
        .content{
            position: fixed;
            z-index: 5000;
            width: 80%;
            max-width: 300px;
            min-height: 300px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #ffffff;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="mask"></div>
        <div class="content">
            content show
        </div>
    </div>
</body>

模态框通常还会遇到很严重的的一个问题是：当我们的背景的高度超出了屏幕可视区域的高度，这个时候滚动模态框的mask或者滚动模态框到最后都会对背景进行一个滚动，这显然是一个严重的bug。

解决方法：当我们点击出现模态框的时候，同时设置背景当前最外面的容器的高度为当前屏幕的可视高度，然后对于其他在可视区域之外的部分进行hidden隐藏，这样滚动的时候就不会触发背景的滚动，要记住当我们关闭模态框的时候，要取消这些设置。

    var h = document.documentElement.clientHeight;   //获取可视区域的高度
    var app = document.getElementById('app');   //获取背景最外层的元素
    app.style.height = h + 'px';
    app.style.overflow = 'hidden';

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^