相关文件：layer.ts：将ts后缀改成zip

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script type="text/javascript" src="js/jquery.min.js" ></script>
  7.     <script type="text/javascript" src="js/plugins/layer/layer.min.js" ></script>
  8.   </head>
  9.   <body>
  10.     <button id="test1">普通消息</button>
  11.     <button id="test2">自定义对话框</button>
  12.     <button id="test3">页面加载</button>
  13.     <button id="test4">小提示</button>
  14.     <button id="test5">信息框</button>
  15.     <button id="test6">询问框</button>
  16.     <button id="test7">询问框</button>
  18.   </body>
  19.   <script type="text/javascript">
  20.     //弹出一个提示层
  21.     $('#test1').on('click', function(){
  22.       layer.msg('hello');
  23.     });
  24.     //弹出一个页面层
  25.     $('#test2').on('click', function(){
  26.       layer.open({
  27.         type: 1,
  28.         area: ['600px', '360px'],
  29.         shadeClose: true, //点击遮罩关闭
  30.         content: '\<\div style="padding:20px;">自定义内容\<\/div>'
  31.       });
  32.     });
  34.     //弹出一个loading层
  35.     $('#test3').on('click', function(){
  36.       var ii = layer.load();
  37.       //此处用setTimeout演示ajax的回调
  38.       setTimeout(function(){
  39.         layer.close(ii);
  40.       }, 1000);
  41.     });
  42.     //弹出一个tips层
  43.     $('#test4').on('click', function(){
  44.       layer.tips('Hello tips!', '#test4');
  45.     });
  47.     $("#test5").on("click", function () {
  48.       //信息框
  49.       layer.open({
  50.         content: '尚硅谷：只要学不死，就往死里学'
  51.         , btn: '我知道了'
  52.       });
  53.     });
  57.     $("#test6").on("click", function () {
  58.       //询问框
  59.       layer.open({
  60.         content: '您确定要刷新一下本页面吗？'
  61.         , btn: ['刷新', '不要']
  62.         , yes: function (index) {
  63.           location.reload();
  64.           layer.close(index);
  65.         }
  66.       });
  67.     });
  70.     $("#test7").on("click", function () {
  71.       layer.confirm("询问信息",  {icon: 3, title:'提示'}, function(cindex){
  72.         layer.close(cindex);
  73.       }, function(cindex){
  74.         layer.close(cindex);
  75.       });
  77.     });
  79.   </script>
  80. </html>

1. 普通消息

image.png

2. 自定义对话框

image.png

3.页面加载

image.png

4.提示

image.png

  1. //弹出一个tips层
  2. $('#test4').on('click', function(){
  3.   layer.tips('Hello tips!', '#test4');
  4. });

5.信息框

image.png

6.7.询问框

image.png

8.提示框

image.png

9.提示框

image.png

弹出层封装

  1. var opt = {
  2.   alert : function(msg){
  3.     layer.alert(msg);
  4.   },
  6.   load : function () {
  7.     layer.load(1, {
  8.       shade: [0.5,'#fff'] //0.1透明度的白色背景
  9.     });
  10.   },
  12.   confirm : function(url, msg) {
  13.     var msg = msg ? msg : "确定该操作吗？";
  14.     layer.confirm(msg,function(index){
  15.       opt.load();
  16.       window.location = url;
  17.     });
  18.   },
  20.   dialog : function(message, messageType) {
  21.     if(message != '' && message != null) {
  22.       if(messageType == '1') {
  23.         layer.msg(message, {icon: 1});
  24.       } else {
  25.         layer.alert(message, {icon: 2});
  26.       }
  27.     }
  28.   },
  30.   openWin : function(url,title, width,height) {
  31.     var title = title ? title : false;
  32.     layer.open({
  33.       type: 2,
  34.       title: title,
  35.       zIndex:10000,
  36.       anim: -1,
  37.       maxmin: true,
  38.       aini:2,
  39.       shadeClose: false, //点击遮罩关闭层
  40.       area: [width+"px", height+"px"],
  41.       content: url
  42.     });
  43.   },
  44.   closeWin : function(refresh,call) {
  45.     var index = parent.layer.getFrameIndex(window.name);
  46.     if(refresh) {
  47.       parent.location.reload();
  48.     }
  49.     if(call) {
  50.       parent.init();
  51.     }
  52.     parent.layer.close(index); //执行关闭
  53.   }
  54. }