hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

layui-layer自力组件-弹出层引见_WEB前端开发

2019-12-12后端开发ki4网22°c
A+ A-

【注意事项】

一、运用时,请把文件夹layer悉数安排在您站点的任何一个目次,只需引入layer.js即可,除jQuery外,别的文件无需再引入。

二、如果您的js引入是经由过程兼并处置惩罚或许您不想采纳layer自动猎取的绝对路径,您能够经由过程layer.config()来设置(详见官网API页)

三、jquery需1.8+

下载layer后,把它布置到你项目中的任何一个目次(固然,我们引荐放在前端相干目次里),你不能去搬动layer内里的文件构造,由于它们是不可分离的组合。就像如许:(迥殊申明:须要把悉数layer文件夹引入你的文件中,而不是单单引入layer.js文件)

你没必要去管那些文件是干吗的,你只须要认准一个文件:layer.js 没错,当你试图在页面显现layer的时刻,你应当如许去做:(最简朴的示例)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/layer.css"/>
        <style type="text/css">
            .btn{
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: magenta;
                text-align: center;
                font-size: 15px;
            }
        </style>
    </head>
    <body>
        <div class="btn">点我</div>
        <!--你必须先引入jQuery1.8或以上版本-->
        <script src="js/jquery-2.1.0.js"></script>
        <script src="js/layer/layer.js"></script>
        <script>
            $(".btn").bind("click",function(){
                layer.msg('点我的人最美!');
            });
        </script>
    </body>
</html>
$("#btn").bind("click",function(){
        //layer.msg('点我的人最美!');
        layer.msg('此商品不存在或许已下架,看看其他商品吧!', {
        time: 3000
    });
});

更多示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/layer.css"/>
        <style type="text/css">
            .btn:nth-child(odd){
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: magenta;
                text-align: center;
                font-size: 15px;
            }
            .btn:nth-child(even){
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: aqua;
                text-align: center;
                font-size: 15px;
            }
            #test5{
                text-align: center;
                width: 500px;
                margin-left: 500px;
            }
        </style>
    </head>
    <body>
        <div class="btn" id="btn">点我.btn</div>
        <div class="btn" id="test2">点我test2</div>
        <div class="btn" id="parentIframe">点我parentIframe</div>
        <div class="btn" id="test4">点我test4</div>
        <div class="btn" id="test5">点我test5</div>
        <!--你必须先引入jQuery1.8或以上版本-->
        <script src="js/jquery-2.1.0.js"></script>
        <script src="js/layer/layer.js"></script>
        <script>
        $(function(){
            $("#btn").bind("click",function(){
                layer.msg('点我的人最美!');
            });
            
            //弹出一个页面层
            $('#test2').on('click', function(){
              layer.open({
              type: 1,
              area: ['600px', '360px'],
              shadeClose: true,   //点击遮罩封闭
              content: '\<\div style="padding:20px;">自定义内容--增加本身须要的形貌内容\<\/div>'
              });
            });
            
            //弹出一个iframe层
            $('#parentIframe').on('click', function(){
              layer.open({
              type: 2,
              title: 'iframe父子操纵',
              maxmin: true,
              shadeClose: true, //点击遮罩封闭层
              area : ['800px' , '520px'],
              content: 'parentIframe.html'
              });
            });

            //弹出一个loading层
            $('#test4').on('click', function(){
              var ii = layer.load();
              //此处用setTimeout演示ajax的回调
              setTimeout(function(){
              layer.close(ii);
              }, 1000);
            });
            
            //弹出一个tips层
            $('#test5').on('click', function(){
              layer.tips('Hello tips!', '#test5');
            });
            
        });
        </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/layer.css"/>
        <style type="text/css">
            .btn:nth-child(odd){
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: magenta;
                text-align: center;
                font-size: 15px;
            }
            .btn:nth-child(even){
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: aqua;
                text-align: center;
                font-size: 15px;
            }
            #test5{
                text-align: center;
                width: 100px;
                margin-left: 100px;
            }
        </style>
    </head>
    <body>
        <div class="btn" id="btn">点我.btn</div>
        <div class="btn" id="test2">点我test2</div>
        <div class="btn" id="parentIframe">点我parentIframe</div>
        <div class="btn" id="test4">点我test4</div>
        <div class="btn" id="test5">点我test5</div>
        
        <div class="btn" id="test6">点我test6</div>
        <div class="btn" id="test7">点我test7</div>
        <div class="btn" id="test8">点我test8</div>
        <div class="btn" id="test9">点我test9</div>
        
        <!--你必须先引入jQuery1.8或以上版本-->
        <script src="js/jquery-2.1.0.js"></script>
        <script src="js/layer/layer.js"></script>
        <script>
        $(function(){
            $("#btn").bind("click",function(){
                layer.msg('点我的人最美!');
            });
            
            //弹出一个页面层
            $('#test2').on('click', function(){
              layer.open({
              type: 1,
              area: ['600px', '360px'],
              shadeClose: true,   //点击遮罩封闭
              content: '\<\div style="padding:20px;">自定义内容--增加本身须要的形貌内容\<\/div>'
              });
            });
            
            //弹出一个iframe层
            $('#parentIframe').on('click', function(){
              layer.open({
              type: 2,
              title: 'iframe父子操纵',
              maxmin: true,
              shadeClose: true, //点击遮罩封闭层
              area : ['800px' , '520px'],
              content: 'parentIframe.html'
              });
            });

            //弹出一个loading层
            $('#test4').on('click', function(){
              var ii = layer.load();
              //此处用setTimeout演示ajax的回调
              setTimeout(function(){
                  layer.close(ii);
              }, 1000);
            });
            
            //弹出一个tips层
            $('#test5').on('click', function(){
              layer.tips('Hello tips!', '#test5');
            });
            
            //======================================
            //多窗口形式,层叠置顶
            $('#test6').on('click', function(){
                layer.open({
                  type: 2 //此处以iframe举例
                  ,title: '当你挑选该窗体时,即会在最顶端'
                  ,area: ['390px', '330px']
                  ,shade: 0
                  ,offset: [ //为了演示,随机坐标
                    Math.random()*($(window).height()-300)
                    ,Math.random()*($(window).width()-390)
                  ]
                  ,maxmin: true
                  ,content: 'settop.html'
                  ,btn: ['继承弹出', '悉数封闭'] //只是为了演示
                  ,yes: function(){
                    $(that).click(); //此处只是为了演示,实际运用能够剔除
                  }
                  ,btn2: function(){
                    layer.closeAll();
                  }
                  
                  ,zIndex: layer.zIndex //重点1
                  ,success: function(layero){
                    layer.setTop(layero); //重点2
                  }
                });
            });
            
            
            
            //设置一个通明的讯问框
            $('#test7').on('click', function(){
                layer.msg('大部分参数都是能够公用的<br>合理搭配,展现不一样的作风', {
                  time: 20000, //20s后自动封闭
                  btn: ['邃晓了', '知道了', '哦']
                });
            });
                
            
            //树模一个通告层
            $('#test8').on('click', function(){
                layer.open({
                  type: 1
                  ,title: false //不显现标题栏
                  ,closeBtn: false
                  ,area: '300px;'
                  ,shade: 0.8
                  ,id: 'LAY_layuipro' //设定一个id,防备反复弹出
                  ,resize: false
                  ,btn: ['敏捷围观', '残暴谢绝']
                  ,btnAlign: 'c'
                  ,moveType: 1 //拖拽形式,0或许1
                  ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">内容<br>内容</div>'
                  ,success: function(layero){
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                      href: 'http://www.layui.com/'
                      ,target: '_blank'
                    });
                  }
                });
            });
             
            //边沿弹出
            $('#test9').on('click', function(){
                layer.open({
                   type: 1
                   ,offset: 'c' //细致设置参考:offset参数项(t、r、b、l、c)
                   ,content: '<div style="padding: 20px 80px;">内容</div>'
                   ,btn: '封闭悉数'
                   ,btnAlign: 'c' //按钮居中
                   ,shade: 0 //不显现遮罩
                   ,yes: function(){
                       layer.closeAll();
                  }
                });
            });


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

更多layui学问请关注layui运用教程栏目。

以上就是layui-layer自力组件-弹出层引见的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
layui-layer自力组件-弹出层引见_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>