实例
可以兼容安卓4.0.4+：
设计结构如下：
<header class="header"></header>
<p class="wrap-page">
<section class="page"></section>
...
</p>
<footer class="footer"></footer>
<p class="overlay">
<section class="modal">
<p class="modal-hd"></p>
<p class="modal-bd"></p>
<p class="modal-ft"></p>
</section>
</p>登录后复制
这个overlay遮罩层的问题，现在这里说明下为什么这么设计。
一般来说看到的overlay都与modal是兄弟元素，而不是嵌套关系。本来我也是这么设计的，这就是习惯。后来由于modal居中的问题，重新审视了下这个问题：
为什么遮罩层的overlay与弹窗内容是兄弟元素？
说实话真想不出什么理由，非得搞成兄弟元素。后来突然意识到以前的遮罩层如果不采用半透明图片的话，就得使用opacity（ie6-8不支持，通过滤镜模拟），而这个属性会对整个子元素都起作用，而且还没办法通过子元素覆写这个值。这是我能想到的一条最佳理由，如果还有其他理由欢迎交流。
对于高上大的移动端来说，都是rgba时代了，所以opacity回家吃饭先。既然这个对子元素的影响已经不是问题，那么嵌套关系就可以成立，而且嵌套还有一个非常好的理由，水平垂直居中，flex小指一动即可。而兄弟元素的水平垂直居中就得设置modal的top和left的值为50%，然后再设置translate的x和y方向都-50%
所以果断抛弃兄弟元素设计换成嵌套关系。
因为overlay采用了flex布局来控制子元素居中，所以不难呢过采用display为none/block来显示隐藏遮罩层overlay，而是通过z-index的层级来控制，而modal部分通过添加删除modal-in这个class来控制显示隐藏
scss代码如下：
.overlay{
position: fixed;
top: 0;
rightright: 0;
bottombottom: 0;
left: 0;
z-index: -1;
background-color: rgba(0,0,0,.8);
@include flex-center; // flex水平垂直居中
}
.overlay.active {
z-index: 980;
}
$modalBarHeight: 40px !default;
$modalBdPadding: 15px;
.modal{
background-color: #fff;
border-radius: 5px;
margin: 0 10px;
overflow: hidden;
opacity: 0;
@include transform(translate3d(0,0,0) scale(0.815));
@extend %all-transition;
@include transition-property(transform, opacity);
&.modal-in{
opacity: 1;
@include transform(translate3d(0,0,0) scale(1));
}
.modal-hd{
text-align: center;
line-height: $modalBarHeight;
background-color: $primary;
color: #fff;
}
.modal-bd{
padding: $modalBdPadding;
}
.modal-ft{
border-top: 1px solid $gray;
@extend %display-flex;
.btn-modal{
@include flex(1);
background-color: #fefefe;
text-align: center;
line-height: $modalBarHeight;
color: $primary;
&:first-child{
border-right: 1px solid $gray;
}
&:last-child{
border-right: none;
}
&:hover,&:active{
background-color: #d9d9d9;
}
}
}
}登录后复制
常见问题解决
移动端模拟弹窗时，遇到一些问题，现总结如下，以加深记忆。
情况一：
当body高度大于viewport高度时，在弹窗上滑动时，会遇到body也跟着滑动的现象。
解决思路：
禁止touchmove，及overflow:hidden来实现，参考下面代码：
/**
* 初始化弹窗
*/
var initDialog = (function() {
var _tmpl = baidu.template('dialog-tpl', {});
return {
tmpl : $(_tmpl),
/**
* [create 创建弹窗]
* @return {[type]} [description]
*/
create: function() {
var me = this,
_tmpl = me.tmpl;
$('body')
// 禁用鼠标滚轮滚动
.css('overflow', 'hidden')
.append(_tmpl)
// 禁止touchmove，阻止body滑动
.on('touchmove', function(e) {
e.preventDefault();
})
// 关闭动作
.on('tap', 'dialog-close', function() {
me.destroy();
})
},
/**
* [destroy 销毁弹窗]
* @return {[type]} [description]
*/
destroy: function() {
this.tmpl.remove();
// 解除touchmove绑定、启用滚动
$('body').off().css('overflow', 'auto');
}
}
})();登录后复制
情况二：
软键盘弹起时，自定弹窗不能铺满全屏
解决思路：
打开弹窗前，通过javascript的blur事件来收起软键盘。
情况三：
实现toast组件时，如果toast使用
position: fixed;bottom:-3rem;即离底部比较近时，按照我们正常想法应该是键盘把页面往上推，但是在IOS及Andriod UC浏览器中会出现toast被键盘覆盖，即使我们设置z-index也无济于事，因为键盘在整个浏览器的上层。
解决思路：
出现toast的时候，监听所有控件的事件，当focus时，动态计算当前位置，重新计算。但是有个问题，不同机型键盘的高度不统一。M端部分参考代码：
<style type="text/css">
body {
text-align: center;
}
input[type=text] {
width: 80%;
height: .8rem;
margin-top: .3rem;
}
.toast {
position: fixed;
bottombottom: .3rem;
left: 50%;
margin-left: -1rem;
width: 2rem;
height: 1rem;
background-color: #f00;
border-radius: 10px;
color: #fff;
}
</style>
<input type="text">
<p class="toast">Toast</p>登录后复制
以上是SCSS移动端页面遮罩层效果的实现及常见问题的解决方法的详细内容。更多信息请关注PHP中文网其他相关文章！
