layer实现弹出层
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+
版权声明：本文为haimengqingyuan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。