zoukankan      html  css  js  c++  java
  • fixed固定时弹窗上的input被软键盘遮住的问题

    <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%);");
    		});
    

      

     

  • 相关阅读:
    轻量级数据持久层Seaking.PL简介--Query对象
    轻量级数据持久层Seaking.PL简介及建议征集
    Google秘密搜索入口
    异常,究竟抛向何处?
    [转]深入讲解ASP+ 验证
    .Net卸载程序的制作
    性能测试:Reflection VS CodeDom
    小心文件夹名称中的特殊字符
    [转]用Web标准进行开发
    使用ASP.Net Forms模式实现WebService身份验证
  • 原文地址:https://www.cnblogs.com/xinheng/p/10156226.html
Copyright © 2011-2022 走看看