jQuery插件layer：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  6.     <title>layer弹出层插件使用测试</title>
  7.     <style>
  8.         #confirm-btn{
  9.             background: aliceblue;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <button id="test1">小小提示层</button>
  15.     <button id="test2">弹出一个页面层</button>
  16.     <button id="test3">弹出一个loading层</button>
  17.     <button id="test4">弹出一个tips层</button>
  18.     <script src="jquery-3.2.1.js"></script>
  19.     <script src="layer/layer.js"></script>
  20.     <!--<link rel="stylesheet" href="layer.css">-->
  21.     <script>
  22.         $("#test1").on(\'click\',function(){
  23.             layer.msg("hello layer");
  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.         });*/
  33.         $("#test2").on("click",function(){
  34.             layer.open({
  35.                 type:1,
  36.                 area:[\'300px\',\'300px\'],
  37.                 shadeClose:true,
  38.                 content:\'<div>\'+\'<div><label>姓名：</label><input type="text"></div>\'
  39.                        +\'<div><label>手机号：</label><input type="text"></div>\'
  40.                         +\'<button id="confirm-btn" ng-click="confirm()">确定</button><button>取消</button>\'
  41.                         +\'</div>\'
  42.             });
  43.         });
  44.         $(document).on(\'click\', \'#confirm-btn\', function() { //起作用
  45.             layer.msg(\'响应点击事件\');
  46.         });
  47.        /* $("#confirm-btn").on(\'click\',function(){ //不起作用
  48.             layer.msg("确定");
  49.         });*/
  50.         /*function confirm(){  //不起作用
  51.             alert(\'ok\');
  52.         }*/
  53.         $("#test3").on(\'click\',function(){
  54.             var ii = layer.load();
  55.             setTimeout(function(){
  56.                 layer.close(ii);
  57.             },1000);
  58.         });
  59.         $("#test4").on(\'click\',function(){
  60.             layer.tips(\'hello tips\',\'#test4\');
  61.         });
  62.     </script>
  63. </body>
  64. </html>

　　

 

 

  1. Ps：【注意事项】
  1. 一、使用时，请把文件夹layer整个放置在您站点的任何一个目录，只需引入layer.js即可，除jQuery外，其它文件无需再引入。
  1. 二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径，您可以通过layer.config()来配置（详见官网API页）
  1. 三、jquery需1.8+

版权声明：本文为haimengqingyuan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/haimengqingyuan/p/7703793.html