집 > 기사 > 웹 프론트엔드 > layui-layer 독립 컴포넌트-팝업 레이어 소개

layui-layer 독립 컴포넌트-팝업 레이어 소개

尚앞으로: 2019-12-11 16:47:472534검색

【주의 사항】

1. 사용 시 전체 폴더 레이어를 사이트의 임의 디렉터리에 배치하세요. jQuery를 제외하고 다른 파일은 도입할 필요가 없습니다.

2. js 가져오기가 병합을 통해 처리되거나 레이어에서 자동으로 얻은 절대 경로를 사용하지 않으려면 layer.config()를 통해 구성할 수 있습니다(자세한 내용은 공식 웹사이트 API 페이지 참조)

3. jquery에는 1.8 이상이 필요합니다

레이어를 다운로드한 후 프로젝트의 임의 디렉터리에 배포합니다. (물론 프런트엔드 관련 디렉터리에 배치하는 것이 좋습니다.) 레이어의 파일 구조는 이동할 수 없습니다. 뗄래야 뗄 수 없는 조합. 다음과 같습니다: (특별 참고 사항: layer.js 파일뿐만 아니라 전체 레이어 폴더를 파일에 도입해야 합니다.)

layui-layer 독립 컴포넌트-팝업 레이어 소개

해당 파일의 용도에 대해 걱정할 필요가 없습니다. 파일을 찾으세요: layer.js 예, 페이지에 레이어를 렌더링하려고 할 때 다음과 같이 해야 합니다: (가장 간단한 예)

<!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(&#39;点我的人最美！&#39;);
            });
        </script>
    </body>
</html>

$("#btn").bind("click",function(){
        //layer.msg(&#39;点我的人最美！&#39;);
        layer.msg(&#39;此商品不存在或者已下架，看看其他商品吧！&#39;, {
        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(&#39;点我的人最美！&#39;);
            });
            
            //弹出一个页面层
            $(&#39;#test2&#39;).on(&#39;click&#39;, function(){
              layer.open({
              type: 1,
              area: [&#39;600px&#39;, &#39;360px&#39;],
              shadeClose: true,   //点击遮罩关闭
              content: &#39;\<\div style="padding:20px;">自定义内容--添加自己需要的描述内容\<\/div>&#39;
              });
            });
            
            //弹出一个iframe层
            $(&#39;#parentIframe&#39;).on(&#39;click&#39;, function(){
              layer.open({
              type: 2,
              title: &#39;iframe父子操作&#39;,
              maxmin: true,
              shadeClose: true, //点击遮罩关闭层
              area : [&#39;800px&#39; , &#39;520px&#39;],
              content: &#39;parentIframe.html&#39;
              });
            });

            //弹出一个loading层
            $(&#39;#test4&#39;).on(&#39;click&#39;, function(){
              var ii = layer.load();
              //此处用setTimeout演示ajax的回调
              setTimeout(function(){
              layer.close(ii);
              }, 1000);
            });
            
            //弹出一个tips层
            $(&#39;#test5&#39;).on(&#39;click&#39;, function(){
              layer.tips(&#39;Hello tips!&#39;, &#39;#test5&#39;);
            });
            
        });
        </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(&#39;点我的人最美！&#39;);
            });
            
            //弹出一个页面层
            $(&#39;#test2&#39;).on(&#39;click&#39;, function(){
              layer.open({
              type: 1,
              area: [&#39;600px&#39;, &#39;360px&#39;],
              shadeClose: true,   //点击遮罩关闭
              content: &#39;\<\div style="padding:20px;">自定义内容--添加自己需要的描述内容\<\/div>&#39;
              });
            });
            
            //弹出一个iframe层
            $(&#39;#parentIframe&#39;).on(&#39;click&#39;, function(){
              layer.open({
              type: 2,
              title: &#39;iframe父子操作&#39;,
              maxmin: true,
              shadeClose: true, //点击遮罩关闭层
              area : [&#39;800px&#39; , &#39;520px&#39;],
              content: &#39;parentIframe.html&#39;
              });
            });

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


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

layui 지식을 더 보려면 비용을 지불하세요. attentionlayui 사용법 튜토리얼 칼럼.

위 내용은 layui-layer 독립 컴포넌트-팝업 레이어 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

jquery layui JS

성명：

이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Layui 패키징 모듈 튜토리얼다음 기사：Layui 패키징 모듈 튜토리얼