简单通用的模态框"/>
简单通用的模态框
在学习使用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';更多推荐
简单通用的模态框
发布评论