Layer弹窗组件
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
Layer的开发手册和下载地址
http://layer.layui.com/api.html
http://layer.layui.com/
Open
基本上是露脸率最高的方法,不管是使用哪种方式创建层,都是走layer.open(),创建任何类型的弹层都会返回一个当前层索引,该网站中的options即是基础参数http://layer.layui.com/api.html#type
例子:
layer.open ({ type:0, content:"成功,喵呜~", icon:6, closeBtn: 2, btn1:function(index){layer.closeAll()}, end:function(){layer.closeAll()} });
CloseAll关闭弹窗
它会销毁掉当前页所有的layer层。当然,如果你也可以指定关闭某个类型的层
layer.closeAll(); //疯狂模式,关闭所有层 layer.closeAll('dialog'); //关闭信息框 layer.closeAll('page'); //关闭所有页面层 layer.closeAll('iframe'); //关闭所有的iframe层 layer.closeAll('loading'); //关闭加载层 layer.closeAll('tips'); //关闭所有的tips层
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
//parent.layer.closeAll(index);
parent.layer.closeAll();
Tips小贴士
它拥有和 msg
一样的低调和自觉,而且会智能定位,即灵活地判断它应该出现在哪边。默认是在元素右边弹出
function tips() { layer.tips("想要修改东西,先点击我解除", $("#edit"), { tips: [1, '#3595CC'], time: 4000 }); $("#add,#edit,#save,#cut,#remove").mouseover(function () { var title = $(this).attr("title"); layer.tips(title, $(this), { tips: [1, '#3595CC'], }); }).mouseleave(function () { layer.closeAll('tips'); }) }
Load加载图
load
默认是不会自动关闭的,因为你一般会在 ajax
回调体中关闭它。
layer.load(0,{ shade:[0.5,'#fff'], time:10 * 1000 })
Confirm询问框
Confirm
方法是对 Open
函数的变形
//询问框 layer.confirm('确认退出吗?', { btn: ['确定', '取消'] //按钮 }, function () { window.location.href = "/index.aspx"; layer.closeAll(); //提示层 layer.msg('正在退出...'); }, function () { return; });
Msg
露脸率最高的提示框
layer.msg('玩命提示中'); layer.msg( '这里放置文本内容', { //这里放置基础参数 icon: 1, //1为正确图标,2为错误图标 time: 2000, //2秒关闭(如果不配置,默认是3秒) closeBtn:2 }, function(){ //这里写end事件 });
Iframe
最强大的弹出框
layer.open({ type: 2, title: "正在与门店进行亲切会谈", shadeClose: true, shade: false, maxmin: true, //开启最大化最小化按钮 area: ['400px', '600px'], content: "chat.aspx?roomid=" + id });
IFrame子父窗口交接
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 parent.layer.closeAll(index); parent.layer.closeAll();
居中问题
$('img').load(function() { //由于模板中存在图片未加载,当layer弹出的时候。宽度计算错误导致不居中,所以我手动居中了 var widthForWindow = $(window).width(); var winthForLayer = $(".mylayer").width(); var myWidth = (widthForWindow - winthForLayer) / 2; layer.style(index,{left:myWidth,top:"15%"}); })
模板通常会配合open使用
$("#jifenpeizhi").click(function () { layer.closeAll(); var index = layer.open ({ type: 1, title: "积分配置", content: $("#template").html(), btn: 1, shade:0, skin:"jifenpeizhi" }); $("#start,#end").bind("click",function() { var id = "#" + $(this).attr("id"); laydate({ elem: id, format: 'YYYY/MM', // 分隔符可以任意定义,该例子表示只显示年月 festival: true, //显示节日 choose: function (datas) { //选择日期完毕的回调 alert('得到:' + datas); } }) }) $(".jifenpeizhi").css({"min-width":"700px" }); //由于模板中存在图片未加载,当layer弹出的时候。宽度计算错误导致不居中,所以我手动居中了 var widthForWindow = $(window).width(); var winthForLayer = $(".jifenpeizhi").width(); var myWidth = (widthForWindow - winthForLayer) / 2; layer.style(index, { left: myWidth, top: "15%" }); })
监听ESC关闭所有的layer
document.onkeydown = function (event) { var e = event || window.event || arguments.callee.caller.arguments[0]; var keyCode = e.keyCode || e.which; if (keyCode == "27") { layer.closeAll(); } }
手机版
layer.open({ title: '信息', content: '金额必须为正整数',btn:["好的"],yes:function(){layer.closeAll();} });
load
layer.open({type: });
Layer弹窗组件的更多相关文章
- layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案
layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...
- Vue列表组件与弹窗组件示例
列表组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <me ...
- Jquery弹窗组件
下面是写的简单的Jquery弹窗组件 暂不支持animate,只能满足一般的弹窗显示隐藏需求,更多功能后续会完善!网上及jquery组件很多这样的弹窗,但是用别人的感觉心里过不去,所以就随便写写,当做 ...
- 百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板
百度智能小程序自定义弹窗组件wcPop|百度小程序model对话框|智能小程序弹窗界面模板 最近百度也推出了自己的智能小程序,如是就赶紧去试了下,官方提供的api还不是狠完整.而且官方提供的弹窗组件也 ...
- 基于JQ的自定义弹窗组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 微信小程序弹窗组件
概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...
- 从零开始徒手撸一个vue的toast弹窗组件
相信普通的vue组件大家都会写,定义 -> 引入 -> 注册 -> 使用,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): ...
- Vue - 简单实现一个命令式弹窗组件
前言 在日常工作中弹窗组件是很常用的组件,但用得多还是别人的,空闲时间就自己来简单实现一个弹窗组件 涉及知识点:extend.$mount.$el 使用方式: this.$Confirm({ titl ...
- uni-app自定义Modal弹窗组件|仿ios、微信弹窗效果
介绍 uniapp自定义弹窗组件uniPop,基于uni-app开发的自定义模态弹窗|msg信息框|alert对话框|confirm确认框|toast弱提示框 支持多种动画效果.多弹窗类型ios/an ...
随机推荐
- HDU 4162 Shape Number (最小表示法)
题意:给你一串n个数,求出循环来看一阶差的最小字典序:数字串看成一个顺时针的环,从某一点开始顺时针循环整个环,保证字典序最小就是答案 例如给你 2 1 3 就会得到(1-2+8 注意题意负数需要加8) ...
- loadrunner生成随机数
loadrunner生成随机数一: 对网站注册进行压力测试时,需要对注册的用户名进行参数化,因为可以会用到大量的测试数据,所以选择通过生成随机数来进行参数化.最开始用loadrunner自带的参数随机 ...
- C#插件构架实战 + Visual C#插件构架实战补遗(转)
C#插件构架实战 C# 插件构架实战 Jack H Hansen [ 2004-07-27 ] Keywords C# 插件 反射(System.Reflection) 属性(System.Attri ...
- 2016.8.16 HTML5重要标签及其属性学习
1.运用BootStrap的基本布局: 2.基本布局第二步: ] 3.BootStrap提供了一个class=”well“”类,可以给你种深度的感觉: 4.不是每一个类都是为了CSS,有些类创建出来只 ...
- no-jquery 04 Events
Events Sending Native (DOM) Events anchorElement.click(); Sending Custom Events var event = document ...
- Transform组件C#游戏开发快速入门
Transform组件C#游戏开发快速入门大学霸 组件(Component)可以看作是一类属性的总称.而属性是指游戏对象上一切可设置.调节的选项,如图2-8所示.本文选自C#游戏开发快速入门大学霸 ...
- js兼容方法:通过样式名获取元素,byClass
function byClass(oParent,className){ if(document.getElementsByClassName){ //if it is Firefox return ...
- 【转】】Android ADB命令大全
ADB很强大,记住一些ADB命令有助于提高工作效率. 获取序列号: adb get-serialno 查看连接计算机的设备: adb devices 重启机器: adb reboot 重启到bootl ...
- 请将 php.ini 中的 short_open_tag 设置为 On,否则无法继续安装。
安装的wamp套件,访问http://localhost/Discuz/install/index.PHP进行安装操作,提示 对不起,请将 php.ini 中的 short_open_tag 设置为 ...
- 多表头固定demo--html Table
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...