jQuery插件layer:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <title>layer弹出层插件使用测试</title> <style> #confirm-btn{ background: aliceblue; } </style> </head> <body> <button id="test1">小小提示层</button> <button id="test2">弹出一个页面层</button> <button id="test3">弹出一个loading层</button> <button id="test4">弹出一个tips层</button> <script src="jquery-3.2.1.js"></script> <script src="layer/layer.js"></script> <!--<link rel="stylesheet" href="layer.css">--> <script> $("#test1").on('click',function(){ layer.msg("hello layer"); }); /* $("#test2").on("click",function(){ layer.open({ type:1, area:['600px','360px'], shadeClose:true, content:'<div style="padding:20px">自定义内容</div>' }); });*/ $("#test2").on("click",function(){ layer.open({ type:1, area:['300px','300px'], shadeClose:true, content:'<div>'+'<div><label>姓名:</label><input type="text"></div>' +'<div><label>手机号:</label><input type="text"></div>' +'<button id="confirm-btn" ng-click="confirm()">确定</button><button>取消</button>' +'</div>' }); }); $(document).on('click', '#confirm-btn', function() { //起作用 layer.msg('响应点击事件'); }); /* $("#confirm-btn").on('click',function(){ //不起作用 layer.msg("确定"); });*/ /*function confirm(){ //不起作用 alert('ok'); }*/ $("#test3").on('click',function(){ var ii = layer.load(); setTimeout(function(){ layer.close(ii); },1000); }); $("#test4").on('click',function(){ layer.tips('hello tips','#test4'); }); </script> </body> </html>
Ps:【注意事项】
一、使用时,请把文件夹layer整个放置在您站点的任何一个目录,只需引入layer.js即可,除jQuery外,其它文件无需再引入。
二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径,您可以通过layer.config()来配置(详见官网API页)
三、jquery需1.8+