投稿
  1. 极客之音首页
  2. 后端开发
  3. .NET

Layer.js弹层的一些简单的使用

小半 • • .NET • 阅读 328

导读：本篇文章讲解 Layer.js弹层的一些简单的使用，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

//-----------这里只是简单的做一下记录，没有封装，作为笔记防止忘记了

//----contentMsg 里面是可以传入 HTML代码的
   top.layer.alert(contentMsg, {
                    area: [(_width - 5) + 'px', 'auto'],
                    time: 20000,
                    btn: false,
                    title: [title, 'background-color: #00bb9d;text-align:center;font-size:18px;']
                });
           



//---Layer.confirm
      layer.confirm('确定要发送消息来提醒客服付款吗？', { icon: 3, title: '提示' }, function (index) {
                    //do something
                  layer.msg("ok");
          })




  function member_edit(id, username, nickname, sex, phone, email, address, start) {          
            layer.open({
                type: 1,
                title: '修改用户信息',
                maxmin: true,
                shadeClose: false, //点击遮罩关闭层
                area: ['800px', ''],
                content: $('#add_menber_style'),
                btn: ['提交', '取消'],
                yes: function (index, layero) {
                    var num = 0;
                    var str = "";                 
                    if (num > 0) { return false; }
                    else {
                        layer.alert('保存成功！', {
                            title: '提示框',
                            icon: 1,
                        });
                        layer.close(index);
                    }
                }
            });
        }





//----layui  的时间控件的使用  laydate

  <label class="l_f">开始时间：</label><input class="inline laydate-icon" id="startTime" name="startTime"  placeholder="yyyy-MM-dd"  style="margin-left: 6px;"></li>
  <label class="l_f">开始时间：</label><input class="inline laydate-icon" id="endtime" name="endtime"  placeholder="yyyy-MM-dd"  style="margin-left: 6px;"></li>

  <link href="/Content/layui/css/layui.css" rel="stylesheet" />
    <script src="/Content/layui/layui.js"></script>
    <script type="text/javascript">
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#startTime' //指定元素
            });
            laydate.render({
                elem: '#endtime' //指定元素
            });
        });
    </script>


//---layer.js弹出层的关闭按钮调整位置
   .layui-layer-setwin .layui-layer-close2 {
            position: absolute;
            right: -14px !important;
            top: -14px !important;
            width: 30px;
            height: 45px;
            margin-left: 0;
            _display: none;
        }



//----在js中获取URL地址上的id    value

 function kefu() {
            var mwidth = $(window).width();
            var mheight = $(window).height();
            layer.open({
                type: 2,
                area: ['' + mwidth + 'px', '' + mheight + 'px'],
                title: "在线咨询",
                maxmin: true,
                content: "/kfbox.aspx?pid=" + GetQueryString("id")//-----获取id
            });
        }

    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }




//-----封装 layer的弹出层

 <script type="text/javascript">
        var _width ;
        $(function () {
            initTop6img();
            _width = $(window).width();
            var lis = $("div.footer>ul>li");
            showGitfInfoMsg(lis.eq(0),
    '华豆可以做什么?', 
    "1:华豆可在下单时候用于抵扣订单款。<br/>2:1华豆=1RMB。");          
        })

        function showGitfInfoMsg(obj, title, contentMsg) {      
            obj.click(function () {
                top.layer.alert(contentMsg, {
                    area: [(_width - 5) + 'px', 'auto'],
                    time: 2000,
                    btn: false,
                    title: [title, 'background-color: #00bb9d;text-align:center;font-size:18px;']
                });
            })
        }
     }


//----Layer弹出层

   var lis = $("div.footer>ul>li");
            lis.eq(0).click(function () {
                top.layer.alert("1:Q米可在下单时候用于抵扣订单款。<br/>2:1Q米=1RMB。", {
                    area: ['320px', 'auto'],//设置一下宽度，会自动给居中
                    time: 20000,
                    btn: false,
                    title: ['Q米可以做什么?', 'background-color: #00bb9d;text-align:center;font-size:18px;']
                });
            })




//----layer弹出层的 icon  

       top.layer.msg("加载中....", { time: 3000, icon: 1 })//对的V
                top.layer.msg("加载中....", { time: 3000, icon: 2 })//错误的X
                top.layer.msg("加载中....", { time: 3000, icon: 3 })//?
                top.layer.msg("加载中....", { time: 3000, icon: 4 })//一把锁
                top.layer.msg("加载中....", { time: 3000, icon: 5 })//不高兴的脸
                top.layer.msg("加载中....", { time: 3000, icon: 6 })//笑脸！
                top.layer.msg("加载中....", { time: 3000, icon: 7 })//感叹号！


//---------layer.msg 背景颜色为透明

    top.layer.msg("努力加载中....", { time: 4000, icon: 6, shade: [0.8, '#393D49'] });

///-------
$('#sayHello').click(function () {  
        top.layer.open({  
            id: "layer_say_hello",  
            type: 2,  
            title: '打招呼',  
            shadeClose: true,  
            shade: 0.8,  
            area: ['500px', '400px'],  
            content: '/Findfriend/Part_SayHello', //iframe的url  
            success: function (layero, index) {  
                var her_uli_id = $("#headico").attr("data-uli-id"); //headico 是 HomeFrame的元素  
                var her_nickname = $("#nickname").text();   //nickname 是 HomeFrame的元素  
                // layero.find("iframe")        找到iframe的jquery对象  
                // layero.find("iframe")[0]     将jqeruy对象转化为Dom对象  
                // contentWindow                获取当前 iframe 的 内容 window对象（Dom对象）  
                //.send-hello 是 LayerFrame 的元素  
                var jquerySendHelloButton = $(".send-hello", layero.find("iframe")[0].contentWindow.document);  
                jquerySendHelloButton.attr("data-her-uli-id", her_uli_id);  
                jquerySendHelloButton.attr("data-her-nick-name", her_nickname);  
            }  
        });  
    })  



//---Layer只加载 form id为fmupdate里面的内容

       top.layer.open({
                            type: 1,//--------------------content: 本地的东东需要设置为1， 其他的页面 需要设置为2
                            title: ['修改抽奖活动信息', 'background-color: #00bb9d;text-align:center;font-size:18px;'],
                            shadeClose: true,
                            shade: false,
                            maxmin: true,
                            area: ['630px', '400px'],
                            content: $("#fmupdate").html(),
                            end: function () {//关闭弹出层之后的回调
                                //alert("ok,现在开始注销")
                            }
                        });



layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
  time: 2000, //2s后自动关闭
  btn: ['明白了', '知道了', '哦']
});



 layer.alert("未获取地址", { icon: 5 });


      function regout() {
            layer.confirm("确认要注销账户？", { icon: 3, title: '账户注销提示',
            content: "账户注销后，你已完成的交易将无法处理售后，所有账户信息将会清除",
            btn: ['确定注销', '取消注销'] }, function (r) {
                if (r) {
                    doUserExitLock();
                }
            });
        }
        function doUserExitLock() {
            $.ajax({
                url: "/ashx/accountexit.ashx?k="+Math.random(),
                dataType: "Text",
                data: {},
                success: function (rlt) {
                    if (rlt == "OK") {
                        layer.msg("注销成功", { icon: 1 }, function () { window.location.href = "/login.aspx";});
                    }
                    else {
                        layer.msg("注销失败", { icon: 2 }, function () { });
                    }
                },
                error: function () {
                    layer.msg("注销失败", { icon: 2 }, function () { });
                }
            });
        }


//----弹出并ajax,并有回调
  function regout() {
            layer.confirm("确认要注销账户？", { icon: 3, title: '账户注销提示',
            content: "账户注销后，你已完成的交易将无法处理售后，所有账户信息将会清除", 
            btn: ['确定注销', '取消注销'] }, function (r) {
                layer.closeAll();

                layer.open({
                    type: 2,
                    title: ['导入信息', 'background-color: #00bb9d;text-align:center;font-size:18px;'],
                    shadeClose: true,
                    shade: false,
                    maxmin: true,
                    area: ['330px', '500px'],
                    content: 'AjaxUserLock_cause.aspx',
                    end: function () {//关闭弹出层之后的回调
                        alert("ok,现在开始注销")
                    }
                });
                //if (r) {
                //    doUserExitLock();
                //}
            });
        }




//-----父窗口弹出，并有子窗口传来的值
  function regout() {
            layer.confirm("确认要注销账户？", { icon: 3, title: '账户注销提示', 
            content: "账户注销后，你已完成的交易将无法处理售后，所有账户信息将会清除",
            btn: ['确定注销', '取消注销'] }, function (r) {
                layer.closeAll();

                layer.open({
                    type: 2,
                    title: ['导入信息', 'background-color: #00bb9d;text-align:center;font-size:18px;'],
                    shadeClose: true,
                    shade: false,
                    maxmin: true,
                    area: ['330px', '460px'],//如果不是 iframe
                    content: 'AjaxUserLock_cause.aspx',
                    end: function () {//关闭弹出层之后的回调
                        if (r) {
    　　　　　　　　　　　　　　//--parent.window.document.getElementById("hideflag").value = "1";

                            if ($("#hideflag").val() == "1") {//默认加载为：0 为一个隐藏域中，由上面子窗口来赋值
                                doUserExitLock();
                            } else {
                               layer.alert("注销操作取消或者失败！", { icon: 2 });
                            }                                                                                                                                                   
                        }
                    }
                });
            });
       }
        //注销操作
        function doUserExitLock() {
            $.ajax({
        .........
        })
    }

 

 

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/64023.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！