css/Jquery position:fixed;点击按钮，底部出现选择框

最新推荐文章于 2022-11-02 16:54:12 发布

Aiences

最新推荐文章于 2022-11-02 16:54:12 发布

阅读量2k

点赞数

分类专栏：移动端开发

本文链接：https://blog.csdn.net/qq_41283814/article/details/78744244

版权

移动端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="../css/mui.min.css">
    <script src="../js/mui.min.js"></script>
    <script src="../js/jquery-3.2.1.min.js"></script>
    <style>
         p{
            margin: 0;
         }
        .rt{
            float: right;
            width: 50%!important;
            height: .21rem!important;
            font-size:.15rem!important;
            letter-spacing: 0.38px;
            text-align: right;
            border: 0!important;
            color: #9B9B9B!important;
        }
        .lever{
            margin-top: .1rem;
            line-height: .21rem;
            padding: .11rem .15rem .12rem;
            font-size:.15rem;
            color: #323232;
            letter-spacing: 0.38px;
            background-color: #FFFFFF;
        }
        .footer{
            position: absolute;
            bottom: 0;
            font-size: .16rem;
            width: 100%;
        }
        .delete{
            display: inline-block;
            text-align: center;
            padding: .15rem 0 .13rem;
            line-height:.22rem;
            width: 50%;
            color: #FFFFFF;
            background-color: #F6473B;
        }
        .save{
            float: right;
            display: inline-block;
            text-align: center;
            padding: .15rem 0 .13rem;
            line-height:.22rem;
            width: 50%;
            color: #3B3C3F;
            background-color: #FFFFFF;
        }
        .all_lever{
            margin-left: .15rem;
            height:auto;
            background-color: #FFFFFF;
            overflow-y: auto;
        }
        .all_lever li{
            padding: .12rem .13rem .11rem .1rem;
            color: #666666;
            letter-spacing: 0.92px;
            line-height: .2rem;
            border-bottom: 1px solid #F2F2F6;
        }
        input[type=radio]{
            top:.08rem!important;
        }

        .lever_title{
            text-align: center;
            font-size: .15rem;
            color: #151717;
            border-bottom: 1px solid #F2F2F6;
            padding: .13rem .11rem .1rem;
            line-height: .21rem;
        }
        .go_back{
            width: .26rem;
            height: .26rem;
            position: absolute;
            right: .2rem;
        }
        .select_footer{
            font-size: .15rem;
            color: #FFFFFF;
            background: #FD5575;
            padding: .12rem 0;
            line-height: .21rem;
            text-align: center;
            bottom:0;
            position: fixed;
            width: 100%;
        }
        .select_lever_content{
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            background: rgba(0,0,0,.4);
            display: none;
        }
         .select_lever{
            background-color: #FFFFFF;
            width: 100%;
            position: absolute;
            bottom: .45rem;
            overflow-y: auto;
            height: 3rem;
        }
    </style>
</head>
<body>
   <div class="content">
       <p class="lever">
           <label> 级别</label>
           <input class="rt" type="text" placeholder="请选择">
       </p>

       <div class="select_lever_content">
           <div class="select_lever">
               <p class="lever_title">
                   添加级别
                   <img class="go_back" src="../img/go_back@3x.png">
               </p>
               <ul class="all_lever">
                   <li class="mui-radio">
                       <span>最高级</span>
                       <input name="radio1" type="radio" style="display: none" >
                   </li>
                   <li class="mui-radio">
                       <span>中级</span>
                       <input name="radio1" type="radio" style="display: none"  >
                   </li>
                   <li class="mui-radio">
                       <span>低级</span>
                       <input name="radio1" type="radio" style="display: none" >
                   </li>
               </ul>
               <p class="select_footer">
                   确认添加 (1)
               </p>
           </div>
       </div>

   </div>
</body>
<script>
    $(function(){
        //级别选择,点击选中则出现对勾
     $(".all_lever li:first-child input").show().attr("checked","checked");
        $(".all_lever li").click(function(){
            var index=$(this).index();
            $(".all_lever li ").children("input").hide().removeAttr("checked");
            $(this).children("input").show().attr("checked","checked");
        });
        //添加级别
        $(".lever").children("input").click(function(){
            $(".select_lever_content").show();
        });
        $(".go_back").click(function(){
            $(".select_lever_content").hide();
        });
    })
</script>
</html>