ios 弹出框光标错位，固定定位与绝对定位兼容性问题

 

<style type="text/css">

<!--内容样式-->

.pagecontent_wrap{box-sizing:border-box;position:absolute;height:100%;overflow:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch;width:7.5rem;}

.exhibition_load_wrap{position:relative;height:100%;overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch; }

<!--弹框样式-->

.popon_wrap{display:none;}
.popon_wrap .popon_mask{position:absolute;z-index:100001;top:0;left:0;visibility:hidden;visibility:visible;width:100%;height:100%;-webkit-transition-duration:400ms;transition-duration:400ms;opacity:0;opacity:1;background:rgba(0, 0, 0, .3);}
.popon_con{position:absolute;z-index:100002;top:50%;left:50%;width:6.2rem;margin-top:-2rem;margin-left:-3.1rem;-webkit-transition-duration:400ms;transition-duration:400ms;-webkit-transition-property:-webkit-transform, opacity;transition-property:transform, opacity;-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1);opacity:0;opacity:1;color:#3d4145;border-radius:4px;height:4rem;background:#fff}
.popon_wrap .close-at-layer{position:absolute;top:-.62rem;right:-.25rem;width:.5rem;height:.5rem;background:url(../images/close_at_layer.png) no-repeat;background-size:.5rem .5rem;}

.layer_m{padding:.5rem .38rem 0;}

.layer_m.input_wrap input{height:.7rem;padding:10px;border:1px solid #aaa;border-radius:5px;outline:none;}
.layer_m.button_wrap{padding:.17rem 0 0;}
.layer_m.button_wrap button{font-size:.28rem;line-height:.72rem;height:.72rem;text-align:center;color:#fff;border-radius:5px;background:#cc211a;}

</style>

html 代码

1、<!--内容区域-->

<div class="pagecontent_wrap">

　　<div class="exhibition_load_wrap">

　　　　<div class="main">

　　　　　　... ...

　　　　　　<a class="showPopon"> 显示弹框 </a>

　　　　</div>

　　</div>

</div>

2、<!--弹框-->

<section class="popon_wrap">
　　<section class="popon_mask"></section>
　　<section class="popon_con" id="popon_con">
　　　　<a href="javascript:;" class="close-at-layer layer_close"></a>
　　</section>
</section>

模板内容：

<script id="test_tmpl" type="text/html">
<div class="layer_m">
　　<div class="input_wrap">
　　　　<input type="tel" placeholder="请输入你的手机号码" />
　　</div>
　　<div class="button_wrap">
　　　　<button>立即参加</button>
　　</div>
</div>
</script>

 

js 代码：

<script type="text/javascript">

$(document).on('click', '.showPopon', function() {

　　var html = template('test_tmpl');

　　//显示弹框

　　$('.popon_wrap').show().find('.popon_con').append(html);

})

</script>