Layer.js弹层的一些简单的使用
//-----------这里只是简单的做一下记录,没有封装,作为笔记防止忘记了 //----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弹层的一些简单的使用的更多相关文章
- 在Vue中使用layer.js弹出层插件
layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...
- 借用layer让弹层不限制在iframe内部
使用方法: 1 除了layer的success,end,cancel回掉函数以外其它的layer参数都可以使用. 2 使用前在layer的js后边把该js引入(可以命名为layerExtend). 3 ...
- jquery layer弹窗弹层插件 小巧强大
/* 先去官网下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id ...
- jquery layer弹窗弹层插件 (转)
/* 先去官网下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id ...
- layer.js弹出框
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- js 弹层下面的body禁止滚动
弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这不是我们想 ...
- HTML JS 弹层后底部页面禁止滚动处理
1.打开新页面时需要禁止鼠标滚轮,禁止页面滑动: 1 2 3 4 在调用显示层时加上这句js代码就可以了: document.documentElement.style.overflow = &quo ...
- js 弹层 提示
<!DOCTYPE html><html style="height: 100%;"><head lang="en"> &l ...
- layui layer.open() 弹层开启后 Enter回车 遮罩层无限弹处理
解决方案: 增加success回调及其内容 如下: layer.open({ title:'更新论坛信息', type: 1, skin: 'layui-layer-rim', area: ['500 ...
随机推荐
- Linux 用epoll实现的简单http服务器
Linux 用epoll实现的简单http服务器 main.c #include <stdio.h> #include <sys/types.h> #include <s ...
- ulimit 更改 gcc升级 查看显卡状态命令
一.更改ulimit: vim /etc/security/limits.conf 在文件最下方添加以下内容 * soft nofile 65536* hard nofile 65536 二. gcc ...
- Mysql 数据库部署(解压免安装)
下载压缩包,解压. 在根目录下添加my.ini, 复制一下内容,保存. [mysqld] skip-grant-tables #绑定IPv4和3306端口 bind-address = 0.0.0.0 ...
- 201871010128-杨丽霞《面向对象程序设计(java)》第七周学习总
201871010128-杨丽霞-<面向对象程序设计(java)>第七周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...
- day30_8.9 操作系统与并发编程
一.操作系统相关 1.手工操作 1946年第一台计算机诞生--20世纪50年代中期,计算机工作还在采用手工操作方式.此时还没有操作系统的概念. 这时候的计算机是由人为将穿孔的纸带装入输入机,控制台获取 ...
- nginx发布静态资源
nginx发布静态资源 参考 ngx_http_index_module index指令 ngx_http_core_module http指令 location指令 listen指令 root指令 ...
- webdriver模拟鼠标操作
ActionChains 生成模拟用户操作的对象 from selenium.webdriver.common.action_chains import ActionChains ActionChai ...
- VIJOS-P1450 包裹快递
洛谷 P1542 包裹快递 https://www.luogu.org/problem/P1542 JDOJ 1527: VIJOS-P1450 包裹快递 https://neooj.com/oldo ...
- ASP.NET CoreMVC 中的控制器
Controller in ASP.NET Core MVC 在本节中,我们将讨论 Controller 是什么以及它在 ASP.NET Core MVC 中的作用. Fiddler 需要大家提前装一 ...
- 基于paramiko将文件上传到服务器上
通过安装使用paramiko模块,将本地文件上传到服务器上 import paramiko import datetime import os hostname = '服务器ip' username ...