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

//----contentMsg 里面是可以传入 HTML代码的
top.layer.alert(contentMsg, {
area: [(_width - ) + 'px', 'auto'],
time: ,
btn: false,
title: [title, 'background-color: #00bb9d;text-align:center;font-size:18px;']
}); //---Layer.confirm
layer.confirm('确定要发送消息来提醒客服付款吗?', { icon: , title: '提示' }, function (index) {
//do something
layer.msg("ok");
}) function member_edit(id, username, nickname, sex, phone, email, address, start) {
layer.open({
type: ,
title: '修改用户信息',
maxmin: true,
shadeClose: false, //点击遮罩关闭层
area: ['800px', ''],
content: $('#add_menber_style'),
btn: ['提交', '取消'],
yes: function (index, layero) {
var num = ;
var str = "";
if (num > ) { return false; }
else {
layer.alert('保存成功!', {
title: '提示框',
icon: ,
});
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: ;
_display: none;
} //----在js中获取URL地址上的id value function kefu() {
var mwidth = $(window).width();
var mheight = $(window).height();
layer.open({
type: ,
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().match(reg);
if (r != null) return unescape(r[]); return null;
} //-----封装 layer的弹出层 <script type="text/javascript">
var _width ;
$(function () {
initTop6img();
_width = $(window).width();
var lis = $("div.footer>ul>li");
showGitfInfoMsg(lis.eq(),
'华豆可以做什么?',
"1:华豆可在下单时候用于抵扣订单款。<br/>2:1华豆=1RMB。");
}) function showGitfInfoMsg(obj, title, contentMsg) {
obj.click(function () {
top.layer.alert(contentMsg, {
area: [(_width - ) + 'px', 'auto'],
time: ,
btn: false,
title: [title, 'background-color: #00bb9d;text-align:center;font-size:18px;']
});
})
}
} //----Layer弹出层 var lis = $("div.footer>ul>li");
lis.eq().click(function () {
top.layer.alert("1:Q米可在下单时候用于抵扣订单款。<br/>2:1Q米=1RMB。", {
area: ['320px', 'auto'],//设置一下宽度,会自动给居中
time: ,
btn: false,
title: ['Q米可以做什么?', 'background-color: #00bb9d;text-align:center;font-size:18px;']
});
}) //----layer弹出层的 icon top.layer.msg("加载中....", { time: , icon: })//对的V
top.layer.msg("加载中....", { time: , icon: })//错误的X
top.layer.msg("加载中....", { time: , icon: })//?
top.layer.msg("加载中....", { time: , icon: })//一把锁
top.layer.msg("加载中....", { time: , icon: })//不高兴的脸
top.layer.msg("加载中....", { time: , icon: })//笑脸!
top.layer.msg("加载中....", { time: , icon: })//感叹号! //---------layer.msg 背景颜色为透明 top.layer.msg("努力加载中....", { time: , icon: , shade: [0.8, '#393D49'] }); ///-------
$('#sayHello').click(function () {
top.layer.open({
id: "layer_say_hello",
type: ,
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")[].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: ,//--------------------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: , //2s后自动关闭
btn: ['明白了', '知道了', '哦']
}); layer.alert("未获取地址", { icon: }); function regout() {
layer.confirm("确认要注销账户?", { icon: , 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: }, function () { window.location.href = "/login.aspx";});
}
else {
layer.msg("注销失败", { icon: }, function () { });
}
},
error: function () {
layer.msg("注销失败", { icon: }, function () { });
}
});
} //----弹出并ajax,并有回调
function regout() {
layer.confirm("确认要注销账户?", { icon: , title: '账户注销提示',
content: "账户注销后,你已完成的交易将无法处理售后,所有账户信息将会清除",
btn: ['确定注销', '取消注销'] }, function (r) {
layer.closeAll(); layer.open({
type: ,
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: , title: '账户注销提示',
content: "账户注销后,你已完成的交易将无法处理售后,所有账户信息将会清除",
btn: ['确定注销', '取消注销'] }, function (r) {
layer.closeAll(); layer.open({
type: ,
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() == "") {//默认加载为:0 为一个隐藏域中,由上面子窗口来赋值
doUserExitLock();
} else {
layer.alert("注销操作取消或者失败!", { icon: });
}
}
}
});
});
}
//注销操作
function doUserExitLock() {
$.ajax({
.........
})
}
 

Layer.js弹层的一些简单的使用的更多相关文章

  1. 在Vue中使用layer.js弹出层插件

    layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...

  2. 借用layer让弹层不限制在iframe内部

    使用方法: 1 除了layer的success,end,cancel回掉函数以外其它的layer参数都可以使用. 2 使用前在layer的js后边把该js引入(可以命名为layerExtend). 3 ...

  3. jquery layer弹窗弹层插件 小巧强大

    /* 先去官网下载最新的js  http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id ...

  4. jquery layer弹窗弹层插件 (转)

    /* 先去官网下载最新的js  http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id ...

  5. layer.js弹出框

    HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  6. js 弹层下面的body禁止滚动

    弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这不是我们想 ...

  7. HTML JS 弹层后底部页面禁止滚动处理

    1.打开新页面时需要禁止鼠标滚轮,禁止页面滑动: 1 2 3 4 在调用显示层时加上这句js代码就可以了: document.documentElement.style.overflow = &quo ...

  8. js 弹层 提示

    <!DOCTYPE html><html style="height: 100%;"><head lang="en"> &l ...

  9. layui layer.open() 弹层开启后 Enter回车 遮罩层无限弹处理

    解决方案: 增加success回调及其内容 如下: layer.open({ title:'更新论坛信息', type: 1, skin: 'layui-layer-rim', area: ['500 ...

随机推荐

  1. Linux 用epoll实现的简单http服务器

    Linux 用epoll实现的简单http服务器 main.c #include <stdio.h> #include <sys/types.h> #include <s ...

  2. ulimit 更改 gcc升级 查看显卡状态命令

    一.更改ulimit: vim /etc/security/limits.conf 在文件最下方添加以下内容 * soft nofile 65536* hard nofile 65536 二. gcc ...

  3. Mysql 数据库部署(解压免安装)

    下载压缩包,解压. 在根目录下添加my.ini, 复制一下内容,保存. [mysqld] skip-grant-tables #绑定IPv4和3306端口 bind-address = 0.0.0.0 ...

  4. 201871010128-杨丽霞《面向对象程序设计(java)》第七周学习总

    201871010128-杨丽霞-<面向对象程序设计(java)>第七周学习总结 项目 内容 这个作业属于哪个课程  https://www.cnblogs.com/nwnu-daizh/ ...

  5. day30_8.9 操作系统与并发编程

    一.操作系统相关 1.手工操作 1946年第一台计算机诞生--20世纪50年代中期,计算机工作还在采用手工操作方式.此时还没有操作系统的概念. 这时候的计算机是由人为将穿孔的纸带装入输入机,控制台获取 ...

  6. nginx发布静态资源

    nginx发布静态资源 参考 ngx_http_index_module index指令 ngx_http_core_module http指令 location指令 listen指令 root指令 ...

  7. webdriver模拟鼠标操作

    ActionChains 生成模拟用户操作的对象 from selenium.webdriver.common.action_chains import ActionChains ActionChai ...

  8. VIJOS-P1450 包裹快递

    洛谷 P1542 包裹快递 https://www.luogu.org/problem/P1542 JDOJ 1527: VIJOS-P1450 包裹快递 https://neooj.com/oldo ...

  9. ASP.NET CoreMVC 中的控制器

    Controller in ASP.NET Core MVC 在本节中,我们将讨论 Controller 是什么以及它在 ASP.NET Core MVC 中的作用. Fiddler 需要大家提前装一 ...

  10. 基于paramiko将文件上传到服务器上

    通过安装使用paramiko模块,将本地文件上传到服务器上 import paramiko import datetime import os hostname = '服务器ip' username ...