layui-layer独立组件-弹出层介绍

nbsp;html&gt;            <meta>        <title></title>        <link>        <style>            .btn{                width: 100%;                height: 50px;                line-height: 50px;                background: magenta;                text-align: center;                font-size: 15px;            }        </style>                <div>点我</div>        <!--你必须先引入jQuery1.8或以上版本-->        <script></script>        <script></script>        <script>            $(".btn").bind("click",function(){                layer.msg(&#39;点我的人最美！&#39;);            });        </script>    

$("#btn").bind("click",function(){        //layer.msg('点我的人最美！');        layer.msg('此商品不存在或者已下架，看看其他商品吧！', {        time: 3000    });});

nbsp;html&gt;            <meta>        <title></title>        <link>        <style>            .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>                <div>点我.btn</div>        <div>点我test2</div>        <div>点我parentIframe</div>        <div>点我test4</div>        <div>点我test5</div>        <!--你必须先引入jQuery1.8或以上版本-->        <script></script>        <script></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>    

nbsp;html&gt;            <meta>        <title></title>        <link>        <style>            .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>                <div>点我.btn</div>        <div>点我test2</div>        <div>点我parentIframe</div>        <div>点我test4</div>        <div>点我test5</div>                <div>点我test6</div>        <div>点我test7</div>        <div>点我test8</div>        <div>点我test9</div>                <!--你必须先引入jQuery1.8或以上版本-->        <script></script>        <script></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>内容&#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;">内容&#39;                   ,btn: &#39;关闭全部&#39;                   ,btnAlign: &#39;c&#39; //按钮居中                   ,shade: 0 //不显示遮罩                   ,yes: function(){                       layer.closeAll();                  }                });            });        });        </script>