<div class="pwhCover"> <div class="pwhCon"> <div class="pwhTop"> <img src="img/pwh.png" alt="" /> </div> <div class="pwhMid"> <div class="PwhInp"> <input type="text" placeholder="姓名" id='name'/> </div> <div class="PwhInp"> <input type="text" placeholder="电话" id="phone"/> </div> <div class="PwhInp"> <input type="text" value="" placeholder="详细地址" id="address"/> </div> <!--确定--> <div class="pwhSure">确定</div> </div> <!--关闭--> <div class="pwhClose"> <img src="img/pwhClose.png" alt="" /> </div> </div> </div>
.pwhCover{ position: fixed; left: 0; top: 0; 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999999; display: none; } .pwhCon{ position: absolute; left: 0; right: 0; margin: 2rem auto 0; /*top:2rem;*/ 5.8rem; max-height: 80%; overflow: hidden; /*transform: translate(0,-50%);*/ /*-webkit-transform: translate(0,-50%);*/ overflow-y:auto; /*background: #fff;*/ } .pwhTop{ 100%; height: 2.17rem; } .pwhTop img{ display: block; 100%; } .pwhMid{ 100%; overflow: hidden; box-sizing: border-box; background: #fff; box-sizing: border-box; padding:20px 35px 25px; border-bottom-left-radius:0.1rem; border-bottom-right-radius: 0.1rem; } .PwhInp{ 100%; height: 0.8rem; margin-bottom: 0.3rem; } .PwhInp input{ 100%; height: 0.8rem; background: #eaeaea; border:none; font-size: 0.28rem; color: #333; } .pwhSure{ 100%; margin-top: 0.5rem; height: 0.8rem; line-height: 0.8rem; text-align: center; font-size: 0.32rem; color: #fefefe; background: #d2965f; } .pwhClose{ 0.67rem; height: 0.67rem; margin: 0 auto; margin-top: 0.35rem; } .pwhClose img{ display: block; 100%; }
//解决弹出键盘页面高度变化bug $("input").focus(function(){ $("input").css("transform","translate(0,-50%);"); $("input").css("-webkit-transform","translate(0,-50%);"); });