引用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. hadoop2.7全然分布式集群搭建以及任务測试

    要想深入的学习hadoop数据分析技术,首要的任务是必需要将hadoop集群环境搭建起来,本文主要讲述怎样搭建一套hadoop全然分布式集群环境. 环境配置:2台64位的redhat6.5 +  1台 ...

  2. Android中的动画详解系列【1】——逐帧动画

    逐帧动画其实很简单,下面我们来看一个例子: <?xml version="1.0" encoding="utf-8"?> <animation ...

  3. php Apache配置伪静态的介绍

    以下是摘抄http://jingyan.baidu.com/article/86112f132aa7462737978718.html的,作为记录,方便以后参考 现有的在线网上视频教程对伪静态的讲解比 ...

  4. ANT自动编译

    http://blog.csdn.net/grhlove123/article/details/7712630 http://www.cnblogs.com/taoweiji/p/3700915.ht ...

  5. [SCSS] Organize Styles with SCSS Nesting and the Parent Selector

    SCSS nesting can produce DRYer code by targeting child elements without having to write the parent c ...

  6. 路由(Routing)

    RabbitMQ系列教程之四:路由(Routing) (使用Net客户端) 在上一个教程中,我们构建了一个简单的日志系统,我们能够向许多消息接受者广播发送日志消息. 在本教程中,我们将为其添加一项功能 ...

  7. SignalR+NAudio实现语音会话[WPF]

    原文:SignalR+NAudio实现语音会话[WPF] 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/lordwish/article/detai ...

  8. 【z01】铺地毯

    [问题描述] 为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标 系的第一象限)铺上一些矩形地毯.一共有 n 张地毯,编号从 1 到n .现在将这些地毯按照 编号从小到大的顺 ...

  9. Java中利用Math.random()产生服从泊松分布的随机数

    众所周知.Java的Math.random()产生的是服从均匀分布的随机数,可是其它分布的应用也相当广泛,比如泊松分布和高斯分布(正态分布).而这些分布Java没有非常好的提供(高斯分布能够利用Ran ...

  10. 【bzoj2733】永无乡(无旋treap启发式合并 + 并查集)

    传送门 题目分析 起初每个岛都是一个平衡树, 并查集的祖先都是自己.合并两岛时,pri较小的祖先会被作为合并后的祖先, 而两颗平衡树采用启发式合并.查询k值就是基本操作. code #include& ...