Layer.js弹层的一些简单的使用
//-----------这里只是简单的做一下记录，没有封装，作为笔记防止忘记了
//----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({ ......... }) }
版权声明：本文为Fengge518原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。