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+

宝剑锋从磨砺出，梅花香自苦寒来。