引用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. iOS开发:枚举的介绍与使用

    #import "ViewController.h" //第一种写法 typedef enum { XMGDemoTypeTop, XMGDemoTypeBottom, }XMGD ...

  2. tplink-如何远程WEB管理路由器?

    http://service.tp-link.com.cn/detail_article_185.html 如何远程WEB管理路由器? 新版tplink怎么远程Web管理? https://www.1 ...

  3. lower_case_table_names(大小写敏感)

    1 简介    在MySQL中,数据库对应数据目录中的目录.数据库中的每个表至少对应数据库目录中的一个文件(也可能是多个,取决于存储引擎).因此,所使用操作系统的大小写敏感性决定了数据库名和表名的大小 ...

  4. [TypeScript] Typescript Interfaces vs Aliases Union & Intersection Types

    TypeScript has 'interface' and 'type', so when to use which? interface hasName { firstName: string; ...

  5. Eclipse 一直不停 building workspace... 完美解决总结

    Eclipse 一直不停 building workspace... 一.产生这个问题的原因多种 1.自动升级 2.未正确关闭  3.maven下载lib挂起 等..二.解决总结 (1).解决方法  ...

  6. NOIP模拟 - 莫队

    题目描述 给定一个元素个数为 n 的整数数组 a 和 Q 个问题,每个问题有 x,y 两个参数,请统计共有多少个整数 K 满足 K 在 a[x]-a[y] 中出现了恰好 K 次. 输入格式 第一行两个 ...

  7. 【20.00%】【codeforces 44G】Shooting Gallery

    time limit per test5 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  8. windows 系统本地做mysql 主从同步,最后面解决主从同步库名不一致,表结构一致

    原文:windows 系统本地做mysql 主从同步,最后面解决主从同步库名不一致,表结构一致 mysql主从同步的好处以及原理       之前看到很多新闻说某某的服务器奔溃,磁盘碎了,导致数据丢失 ...

  9. 【24.63%】【codefroces 686D】Kay and Snowflake

    time limit per test 3 seconds memory limit per test 256 megabytes input standard input output standa ...

  10. android (12) Fragment使用

    一.Fragment概要: 于Fragment经,布局更好地适应各种尺寸的android打电话,加方便的实现不同页面的切换,就不像曾经activity的跳转那样的麻烦了.能够在activity中嵌套不 ...