补充之前的手机端安卓和ios关于兼容性的问题

最新推荐文章于 2021-08-31 16:59:42 发布

xieqian0204

最新推荐文章于 2021-08-31 16:59:42 发布

阅读量236

点赞数

本文链接：https://blog.csdn.net/xieqian0204/article/details/100014609

版权

/*列表页内容*/
.infobox{
    width: 100%;
    padding: 0 0.2rem;
    box-sizing: border-box;
}
.listcon a:hover{
    text-decoration: none;
    color: #3090F2;
}
.listcon li{
    width: 100%;
    border-bottom: 1px dotted #e3e3e3;
}
.listcon li .tit{
     width: 100%;
     color: #333333;
     font-size: 0.24rem;
     padding: 0.3rem 0 0.2rem 0;
 }
.listcon li .time{
    width: 100%;
    color: #999999;
    font-size: 0.2rem;
    padding: 0 0 0.2rem 0;
}
.listcon li .time span{
    margin-right: 0.2rem;
}
/*填写信息*/
.fillinfo li{
    margin-top: 0.2rem;
}
.fillinfo li label{
    display: inline-block;
    width: 1.28rem;
    height: 0.6rem;
    font-size: 0.24rem;
    color: #333333;
    text-align: right;
}
.fillinfo li input{
    width: 4rem;
    height: 0.6rem;
    font-size: 0.22rem;
    color: #333333;
    padding-left: 0.2rem;
    box-sizing: border-box;
}
.fillinfo li select{
    width: 4rem;
    height: 0.6rem;
    color: #666666;
    border: 1px solid #d0d0d0;
    font-size: 0.20rem;
    padding-left: 0.2rem;
    box-sizing: border-box;
}
.btn{
    display: flex;
    justify-content: space-around;
}
.btn button{
     width: 2rem;
     height: 0.7rem;
     font-size: 0.24rem;
     background: white;
     border: 1px solid #d0d0d0;
     border-radius: 0.1rem;
     color: #333333;
    margin-top: 0.4rem;
 }
.btn button:hover{
    cursor: pointer;
}
/*发表意见*/
.advicecont{
    padding-bottom: 0.8rem;
}
.advboxtit p{
    width: 100%;
    text-align: center;
    font-size: 0.3rem;
    color: #333333;
    line-height: 0.8rem;
}
.advconbox .contit{
    width: 100%;
    text-align: center;
    font-size: 0.22rem;
    color: #333333;
    margin-bottom: 0.2rem;
}
.advconbox .contit span{
    margin-left: 0.2rem;
}
.advconbox ul li{
    margin-bottom: 0.2rem;
}
.advconbox ul>li .conshow{
    width: 100%;
    font-size: 0.22rem;
    color: #333333;
    line-height: 2em;
}
.conshow .advclick:hover{
    text-decoration: none;
}
.raiseadv{
    margin: 0.2rem 0;
    display: none;
}
.advicecon{
    width: 100%;
    min-height: 1.5rem;
    border: 1px solid #d0d0d0;
    font-size: 0.22rem;
    color: #333333;
    padding: 0.2rem;
    box-sizing: border-box;
}
.fixbtn{
    width: 100%;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #d0d0d0;
    background: white;
    z-index: 999;
}
.fixbtn button{
    width: 49.1%;
    height: 0.75rem;
    font-size: 0.3rem;
    background: white;
    border: none;
    color: #333333;
}
/*意见编辑框*/
.mask{
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,.4);
    bottom: 0.77rem;
    display: none;
}
.tatoladvice{
    width: 100%;
    background: white;
    height: 4rem;
    overflow: auto;
    position: absolute;
    bottom: -0.1rem;
    padding: 0.2rem;
    box-sizing: border-box;
    color: #333333;
}
.tips{
    color: #999999;
    font-size: 14px;
}

实现的效果，点击按钮弹出一个编辑框，点击空白处，编辑框隐藏。同时解决滑动固定定位的元素，父级元素跟着滑动的情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">
    <title>发表意见</title>
    <link rel="stylesheet" href="content/style/iconfont.css">
    <link rel="stylesheet" href="content/style/reset.css">
    <link rel="stylesheet" href="content/style/listing.css">
</head>
<body>
   <div class="header">
       <a class="iconfont iconfanhui licon"></a>
       <p>发表意见</p>
       <a class="iconfont icongengduo ricon"></a>
   </div>
   <!--列表内容-->
   <div class="infobox">
       <div class="advicecont">
           <div class="advboxtit">
               <p>石材生产加工环境污染防治条例</p>
           </div>
           <div class="advconbox">
               <p class="contit"><span>第一章</span><span>总则</span></p>
               <ul>
                   <li>
                       <div class="conshow">
                           <p><span>第一条</span><span>【立法目的和依据】</span>为加强对石材生产加工环境污染防治，保护生态环境和公众健康，促进石材行业的持续健康发展，根据《中华人民共和国环境保护法》《中华人民共和国循环经济促进法》《建设项目环境保护管理条例》等法律法规，结合本市实际，制定本条例。<a class="advclick orangetxt"><i class="iconfont iconyijian"></i><span>提修改意见</span></a></p>
                       </div>
                       <!--提出意见-->
                       <div class="raiseadv">
                           <div class="advicecon" contenteditable="true" placeholder="请输入要检索的文本" tipText="请输入您的意见">
                               <p>1.石材的采掘也属于石材的加工生产，应适用本条例。</p>
                               <p>2.石材生产加工，是指以大理石、花岗岩等为主要原材料的各类天然石材制品的。</p>
                           </div>
                       </div>
                   </li>
                   <li>
                       <div class="conshow">
                           <p><span>第二条</span><span>【适用范围】</span> 本市行政区域内石材生产加工的环境污染防治及对其监督管理活动适用本条例。</p>
                           <p>石材生产加工，是指以大理石、花岗岩等为主要原材料的各类天然石材制品的生产加工和以石英石粉、河砂、石材边角料、树脂等为主要原材料的各类人造石材制品的生产加工。</p>
                           <p>石材的采掘污染防治，不适用本条例。<a class="advclick orangetxt"><i class="iconfont iconyijian"></i><span>提修改意见</span></a></p>
                       </div>
                       <!--提出意见-->
                       <div class="raiseadv" >
                           <div class="advicecon" contenteditable="true" placeholder="请输入您的意见" tipText="请输入您的意见">
                               <p>1.石材的采掘也属于石材的加工生产，应适用本条例。</p>
                               <p>2.石材生产加工，是指以大理石、花岗岩等为主要原材料的各类天然石材制品的。</p>
                           </div>
                       </div>
                   </li>
               </ul>
           </div>
       </div>
   </div>
   <div class="fixbtn">
       <button class="totaladvice navcurrent">整体意见</button>
       <button class="submit">提交</button>
   </div>
   <!--意见编辑框-->
   <div class="mask">
       <div class="tatoladvice" contenteditable="true" placeholder="请输入您的意见" tipText="请输入您的意见">
           <span class="tips">请输入您的意见</span>
       </div>
   </div>
   <script src="script/jquery-1.12.3.min.js"></script>
   <script src="script/layer/layer.js"></script>
<script src="script/public.js"></script>
</body>
</html>

$(function () {
    $('.totaladvice').click(function (event) {
        //取消事件冒泡
        event.stopPropagation();
        $(".tips").show();
        $(".mask").show();
        $(".tatoladvice").show();
        $('.tatoladvice').css('-webkit-overflow-scroll','touch');      //解决定位元素跟随页面滑动的问题
        $("body").css("position","fixed");
        return false;
    });
    $(".tatoladvice").click(function () {
        $(".tips").hide();
    })
    //点击空白处隐藏弹出层，下面为滑动消失效果和淡出消失效果。
    $(document).on('click touchstart', function (){     //解决ios点击没反应的问题  加上touchstart 即可解决，因为ios的内置函数会覆盖click函数
        var _con = $('.tatoladvice');   // 设置目标区域
        if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
            $('.tatoladvice').hide();          //淡出消失
            $('.mask').hide();
            $('.tatoladvice').css('-webkit-overflow-scroll','auto');   //解决定位元素跟随页面滑动的问题
            $("body").css("position","relative");
        }
    });
})

xieqian0204

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
补充之前的手机端安卓和ios关于兼容性的问题

/*列表页内容*/.infobox{ width: 100%; padding: 0 0.2rem; box-sizing: border-box;}.listcon a:hover{ text-decoration: none; color: #3090F2;}.listcon li{ width: 100%; border-b...
复制链接

扫一扫