zoukankan      html  css  js  c++  java
  • 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+
    宝剑锋从磨砺出,梅花香自苦寒来。
  • 相关阅读:
    Loved
    什么是REST
    统一资源定位符URL(Uniform Resource Locator)
    HTTP工作原理
    系统程序员成长计划内存管理(一)
    系统程序员成长计划工程管理(四)
    系统程序员成长计划-内存管理(四)
    HTTP请求报文格式
    系统程序员成长计划内存管理(二)
    系统程序员成长计划-内存管理(三)
  • 原文地址:https://www.cnblogs.com/haimengqingyuan/p/7703793.html
Copyright © 2011-2022 走看看