fixed固定时弹窗上的input被软键盘遮住的问题
2024-08-23 11:47:03
<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;
width: 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;*/
width: 5.8rem;
max-height: 80%;
overflow: hidden;
/*transform: translate(0,-50%);*/
/*-webkit-transform: translate(0,-50%);*/
overflow-y:auto;
/*background: #fff;*/ }
.pwhTop{
width: 100%;
height: 2.17rem;
}
.pwhTop img{
display: block;
width: 100%;
}
.pwhMid{
width: 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{
width: 100%;
height: 0.8rem;
margin-bottom: 0.3rem;
}
.PwhInp input{
width: 100%;
height: 0.8rem;
background: #eaeaea;
border:none;
font-size: 0.28rem;
color: #333;
}
.pwhSure{
width: 100%;
margin-top: 0.5rem;
height: 0.8rem;
line-height: 0.8rem;
text-align: center;
font-size: 0.32rem;
color: #fefefe;
background: #d2965f;
}
.pwhClose{
width: 0.67rem;
height: 0.67rem;
margin: 0 auto;
margin-top: 0.35rem;
}
.pwhClose img{
display: block;
width: 100%;
}
//解决弹出键盘页面高度变化bug
$("input").focus(function(){
$("input").css("transform","translate(0,-50%);");
$("input").css("-webkit-transform","translate(0,-50%);");
});
最新文章
- Apache, Tomcat, JK Configuration Example
- 渣渣小本求职复习之路每天一博客系列——数据库基础(MySQL)(5)
- C#执行XSL转换
- 明天去FDUSC报道了,GOD BLESS ALL OF US
- sql 批处理、获取自增长、事务、大文本处理
- Dom0级事件
- Apache环境服务器配置Let&#39;s Encrypt免费SSL证书及自动续期方法
- ASP.NET Web API 自定义 HttpParameterBinding
- Ghost文件封装说明
- Android内核sysfs中switch类使用实例
- JS之document.cookie详解以及$.cookie的使用
- 使用Apache下poi创建和读取excel文件
- python之attrgetter函数对对象排序
- 基于jquery实现页面loading加载效果
- dedecms文章页调用地址(当前文章URL)如何操作?
- 20165324 《网络对抗技术》week1 Kali的安装与配置
- Hive(六)内置函数与高级操作
- acd Convex(求面积)
- 对java NIO 通道的一些了解
- Redis-CentOS7安装