Layer 简单改造封装

最新推荐文章于 2022-06-16 23:34:41 发布

云处安

最新推荐文章于 2022-06-16 23:34:41 发布

阅读量310

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_36575358/article/details/108100665

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="layer_mobile/need/layer.css">
    <script src="jquery-2.1.4.min.js"></script>
    <script src="layer_mobile/layer.js"></script>
    <script src="layer_mobile/layeropen.js"></script>
    <title>Layers简单封装</title>
    <style>
        /*layer添加关闭按钮*/
        .close{
            position:absolute;
            right:-8px;
            top:-8px;
            border-radius:50%;
            width:20px;
            height:20px;
            z-index: 1000;
            background-size: 100% 100%;
            background-image: url("./close.png")
        }
    </style>
</head>
<body>
<div class="center">中间弹窗</div>
<div class="btm">底部弹窗</div>
<div class="custom">自定义风格</div>

<div class="layer_content" style="display: none">
    内容
</div>
<script >
    $(document).ready(function(){

        $('.center').on('click',function(){
            PageCenter('layer_content')
        })
        $('.btm').on('click',function(){
            PageBtm('layer_content')
        })
        $('.custom').on('click',function(){
            CustomStyle('layer_content')
        })
        $(document).on('click','.close',function(){
            console.log('close');
            layer.closeAll()
        })

    });
</script>
</body>
</html>

layeropen.js

function PageCenter(ClassName){
    //页面层
    layer.open({
        type:1
        ,content: $('.' + ClassName).html()
        ,anim: 'scale'
        ,style: "position:fixed; height: 300px;top:50%;margin-top:-150px;width: 300px;left:50%; margin-left:-150px; padding:0 0; border:none;background-size: 100% 100%;background-image: url('/child/img/idxbg.jpg')"
        ,yes: function(index){
            alert('点击了是')
            layer.close(index)
        }
        ,success: function(elem){
            $('.layui-m-layerchild').append('<div class="close"></div>');
        }
    });
}

function PageBtm(ClassName){
    //底部页面层
    layer.open({
        type: 1
        ,content: $('.' + ClassName).html()
        ,anim: 'up'
        ,style: 'position:fixed; bottom:0; left:0; width: 100%; height: 272px; padding:10px 0; border:none;'
        ,closeBtn:[0,true]
        ,success: function(elem){
            $('.layui-m-layerchild').append('<div class="close"></div>');
        }
    });
}


function CustomStyle(ClassName){
    //自定义标题风格
    layer.open({
        content: $('.' + ClassName).html()
    });
}

在这里插入图片描述

云处安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Layer 简单改造封装

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-
复制链接

扫一扫