HTML5页面的弹出框，手机输入法打开后遮住了弹出框，如何解决？

html-css010

HTML5页面的弹出框，手机输入法打开后遮住了弹出框，如何解决？,第1张

因为是弹层的定位问题，如果定位为fixed，用户是无法向上滚动看到输入框了。如果定位为absolute，则用户就可以滑动页面向上看到输入框。这两种的形式都有一定不好的体验。可以通过js控制，当用户点击输入框的时候，把弹层网上移动一点，修改top值。

<div class="mask"><div class="main">关闭</div></div>

.mask{position:fixedleft:0right:0top:0bottom:0font-size:0text-align:centerbackground:rgba(0,0,0,0.8)}

.mask:after{content:""height:100%}

.mask:after,.main{display:inline-blockvertical-align:middle}

.main{font-size:16px}

<input id="test">提交</input>//提交按钮

<script type="text/javascript">

$("#test").click(function () {//点击事件

alert("hello,world!")//弹出的内容

})

</script >