在移动端页面的开发中,当弹出框内有输入框需要用户输入时,往往会面临这样的一个问题:弹出的软键盘会将输入框遮挡住,不方便用户看到自己输入的内容。如下图输入地址一栏:
移动端中,当软键盘弹出时,会触发一个页面的resize事件,意思就是说,html的高度会发生改变,变成原来的高度和软键盘的高度相差值。由下图也可以看出,弹出框因内容自适应变得差不多要占完一整屏,而当软键盘弹出时,高度值resize后的弹出框的高度显然大于页面的新高度。
大部分弹出框一般使用的是fixed或者absolute定位,结构已脱离文档流,所以即使弹出框的高度大于页面的高度,弹出框超出页面部分也只能被隐藏,即所谓的被软键盘覆盖。
在这样的情况下改如何解决?一来,除了让美工在设计弹框的时候高度不要超过屏幕的一半以外,题主想到了一个思路:
首先背景嵌套内层弹框,背景使用fixed定位top、right、bottom及left都设置为0,让其占据一整个屏幕,其次内层弹出框的div使用absolute定位,top值50%后使用translate往上移动50%保证弹出框垂直居中,而left和right根据设计图设置成一个相同的值,宽高不设定,高度设置一个最大值如最高80%,并将y轴的overflow设置为自动。样式及结构如下。
CSS:
CSS:
.floatbox{position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background:rgba(0,0,0,0.5);}
.floatbox>div{position:absolute;
top:50%;
left:15px;
right:15px;
transform:
translate(0,-50%);
-webkit-transform:
translate(0,-50%);
max-height:80%;
overflow-y:auto;
background:#fff;
border-radius:5px;}
HTML:
效果图:
这个方法也有缺陷,当键盘弹出时还是会遮挡住输入框,输入内容时,输入框才会被“提拉”到可见的视区。DEMO可参阅一下二维码,有更好的思路也欢迎跟题主交流。
前端企鹅交流群:125493681