引用layer.js,官网:http://layer.layui.com/
常用属性:btn/icon/skin/time/content/yes(点击确认、提交)

常用窗体
.alert

layer.alert("内容");
layer.alert('墨绿风格,点击确认看深蓝', {
skin: 'layui-layer-molv'//样式类名
, closeBtn: 0
}, function () {
layer.alert('偶吧深蓝style', {
skin: 'layui-layer-lan'
, closeBtn: 0
, shift: 2 //动画类型
});
});

.confirm

layer.confirm('您是如何看待前端开发?',{
btn: ['重要', '奇葩'] //按钮
}, function () {
layer.msg('的确很重要', { icon: 1 });
}, function () {
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
},function() {
layer.msg('明白就好', { time: 20000 });
},function() {
layer.msg('知道就好', { time: 20000 });
});
});

.msg

layer.msg('hello.');

.open 自定义窗口

layer.open({
type: 1,
skin: 'layui-layer-demo',//样式类名
btn: ["关闭"],
/*closeBtn: 0, //不显示关闭按钮*/
shift: 2,
shadeClose: true, //开启遮罩关闭
content: '内容'
});
layer.open({
type: 2,
title: 'layer mobile页',
shadeClose: true,
shade: 0.8,
area: ['700px','90%'],
content: 'http://layer.layui.com/mobile/'//iframe的url
});

.html

$("#layerOpen").html('<imgsrc="/images/loading.gif"/>正在努力为您搜索,请稍后...');

.load 加载

$("#layerOpen").load("/Order/ProductList");

.tips
关闭layer
用一个变量存储弹窗,在需要关闭的地方调用close方法

<div style="display:none;"id="layerOpen"></div>
var layerOpen = null; //弹窗变量
layerOpen=layer.open({
type: 1,
title: "查看XXX的详情",
area: ["1000px","600px"],
content: $("#layerOpen"),
cancel: function () {
$("#layerOpen").html("");
}
});
layer.close(layerOpen);

打开自定义页面

$("#layerOpen").html('<imgsrc="/images/loading.gif"/>正在努力为您搜索,请稍后...');
$("#layerOpen").load("/Controller/Action");
layerOpen = layer.open({
type: 1,
title: "选择XXX",
area: ["1000px","600px"],
content: $("#layerOpen"),
cancel: function () {
$("#layerOpen").html("");
}
});

加载页面
保存变量,打开页面赋值,关闭页面

//加载layer
var load = null;
$.ajax({
type: "POST",
url: "/Controller/Action",
data: {
"PKID":PKID,
"Path": path
},
beforeSend: function () {
load = layer.load(0, { shade:[0.3, '#000'] });//0代表加载的风格,支持0-2
},
success: function (result) {
if (load != null) {
layer.close(load);
}
layer.alert(result.Msg, '提示');
}
});

layerui的更多相关文章

  1. 【Javascript】好用的js弹层插件,layerUI

    官网:layerUI 中文手册:layerAPI

  2. layerUi与AJAX的一种思路

    javascript:function rep(id) { layer.confirm("确定要拒绝此认证吗?", { btn: ["确定", "取消 ...

  3. layerui如何隐藏按钮?

    https://www.layui.com/doc/modules/layer.html#btn 建议把 btn: ['取消'],btnAlign: 'c',yes: function (index) ...

  4. LayeruI Loadding Custom word

    var getTableResult = function (pageIndex, pageSize) { var index = layer.load(2, { content: '加载中..... ...

  5. layerui如何设置显示的位置?

    转自:http://www.layui.com/doc/modules/layer.html#offset layer.open({ type: 1,//默认:0 (0表示信息框,1表示页面层,2表示 ...

  6. Layerui 弹出层的位置设置

    距顶 offset: '300px' 例1: layer.msg("请先选择项!", { offset: '300px' });例2: layer.confirm("确定 ...

  7. layerui ios不适应问题

    .admin-main {-webkit-overflow-scrolling: touch; overflow: scroll; position: absolute; left: 0; top:  ...

  8. layerui上传文件

    参考: http://www.layui.com/doc/modules/upload.html <1> 文件上传(以下函数必须要在js文件加载时执行) upload.render({ e ...

  9. Turtle Online:致力于打造超接地气的PC前端架构,组件+API,快速搭建前端开发

    架构创作初衷 每当新开一个项目时,都会绞尽脑汁去考虑采用哪种框架:requirejs/seajs.jquery/zepto.backbone.easeUI/Bootstrap/AngularJS……, ...

随机推荐

  1. 将Sublime Text2 加入右键菜单

    在googleread里面看有人推荐sublime text2.说开发很方便.就下载一个试试.写html还真的挺爽. 于是按照vim加入鼠标右键的方法.果然可以.这里和大家分享 1. 运行中输入 re ...

  2. 在RedHa上安装MRTG监控网卡流量

    http://os.51cto.com/art/201103/252149.htm 2011-03-30 15:05 张微波 phpchina 字号:T | T 在RedHa上安装MRTG监控网卡流量 ...

  3. CentOS7.1 KVM虚拟化之虚拟机快照(5)

    这里用之前克隆的虚拟机vm1-clone进行快照操作 注: 1.快照实际上做的是虚拟机的XML配置文件,默认快照XML文件在/var/lib/libvirt/qemu/snapshot/虚拟机名/下 ...

  4. [RxJS] Flatten a higher order observable with mergeAll in RxJS

    Among RxJS flattening operators, switch is the most commonly used operator. However, it is important ...

  5. Android 使用Canvas在图片上绘制文字

    一个小应用,在图片上绘制文字,以下是绘制文字的方法,并且能够实现自动换行,字体自动适配屏幕大小 private void drawNewBitmap(ImageView imageView, Stri ...

  6. 摘录-Mybatis - Integer值为0的数据 return false

    Mybatis在进行<if test="status != null and status != ''">判空操作时,如果status为0的时候,该判断条件的值为fal ...

  7. 【u008】瑞瑞的木棍

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 瑞瑞有一堆的玩具木棍,每根木棍的两端分别被染上了某种颜色,现在他突然有了一个想法,想要把这 些木棍连在 ...

  8. 【codeforces 758B】Blown Garland

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  9. PatentTips - OpenCL compilation

    BACKGROUND The present disclosure relates generally to integrated circuits, such as field programmab ...

  10. [Redux] Avoid action type naming conflicts

    In redux, the action type is just a normal string type, it is easy to get naming conflicts in large ...