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+