layer移动端案例

最新推荐文章于 2023-09-18 14:49:36 发布

弹琴弹琴

最新推荐文章于 2023-09-18 14:49:36 发布

阅读量1.1w

点赞数

分类专栏： HTML5+CSS3点滴知识文章标签： layer

本文链接：https://blog.youkuaiyun.com/bbsyi/article/details/77539782

版权

HTML5+CSS3点滴知识专栏收录该内容

50 篇文章

订阅专栏

本文详细介绍了在移动端项目中使用layer组件的案例，包括如何引入、配置，以及在各种场景下如弹窗、提示信息、加载动画等的实战经验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="layer_mobile/layer.js"></script>
    <!--<link rel="stylesheet" href="layer_mobile/need/layer.css">-->
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        ul{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style-type:none;
        }
        .popuo-login footer{
            width: 100%;
        }
        .popuo-login footer{
            position: fixed;
            left: 0;
            bottom: 0;
            height: 40px;
            line-height: 40px;
        }
        .popuo-login footer li{
            width: 50%;
            float: left;
            text-align: center;
            color: white;
            font-size: 16px;
        }
        .popuo-login footer li:nth-child(1){
            background-color: red;
        }
        .popuo-login footer li:nth-child(2){
            background-color: green;
        }
    </style>
</head>
<body>
    <button class="ck">点击</button>
    <script>
        $(function(){
            var pageii;

            $('.ck').click(function(){
                var content='<ul>' +
                                '<li>1</li>' +
                                '<li>2</li>' +
                            '</ul>' +
                            '<footer>' +
                                '<ul>' +
                                    '<li class="close">取消</li>'+
                                    '<li class="ok">确认</li>'
                                '</ul>' +
                            '</footer>';

                pageii = layer.open({
                    type: 1
                    ,content: content
                    ,anim: 'up'
                    ,className: 'popuo-login'
                    ,style: 'position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;'
                });
            })

            //取消
            $('body').on('click','.close',function(){
                layer.close(pageii);
            })
            //确认
            $('body').on('click','.ok',function(){
                console.log('ok');
            })
        })
    </script>
</body>
</html>