layui实现类似于bootstrap的模态框功能
以前习惯了bootstrap的模态框，突然换了layui，想的用layui实现类似于bootstrap的模态框功能。
用到了layui的layer模块，例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./layui/css/layui.css"> <script type="text/javascript" src="./layui/layui.js"></script>
<script type="text/javascript" src="../JS/jquery-1.8.3.js"></script>
<script> function openModak(){
$("[name='testname']").val("xxxxxxxxxxxxxxx");//向模态框中赋值
layui.use(['layer'],function () {
var layer = layui.layer,$=layui.$;
layer.open({
type:1,//类型
area:['400px','300px'],//定义宽和高
title:'查看详细信息',//题目
shadeClose:false,//点击遮罩层关闭
content: $('#motaikunag')//打开的内容
});
})
}
</script> </head>
<body> <button type="button" onclick="openModak()">开启模态框</button> </body>
</html> <!--模仿bootstrap的模态框-->
<div id="motaikunag" style="display: none;">
<div class="layui-row">
<div class="layui-col-md9">
你的内容 9/12
</div>
<div class="layui-col-md3">
你的内容 3/12
</div>
</div>
<div class="layui-row">
<div class="layui-col-md3">
名字
</div>
<div class="layui-col-md9">
<input type="text" name="testname" value="">
</div>
</div> <br/>
<input type="button" onclick="javascript:alert('点击按钮')" title="点我" value="点我">
</div>
结果:
type - 基本层类型:
类型：Number，默认：0
layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
content - 内容
类型：String/DOM/Array，默认：''
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。譬如：
/!*
如果是页面层
*/
layer.open({
type: 1,
content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
type: 1,
content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){
layer.open({
type: 1,
content: str //注意，如果str是object，那么需要字符拼接。
});
});
/!*
如果是iframe层
*/
layer.open({
type: 2,
content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});
/!*
如果是用layer.open执行tips层
*/
layer.open({
type: 4,
content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});
补充：如果想更好的设置宽度，可以:
layui.use(['layer'],function () {
var layer = layui.layer;
var width=($(window).width()*0.80);
var height=($(window).height()*0.60);
layer.open({
title:'添加字典',
area: [width+'px', height +'px'],//大小
fix: false, //不固定
maxmin: true,//是否显示最大最小化按钮
shadeClose: false,
shade:0.4,
type:1,
content:$('#addModal')
});
})
area:
类型：String/Array，默认：'auto'
在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']
为了使模态框的高度自适应而且页面过高出现滚动条，可以采用如下配置:
//2.打开模态框
var width=($(window).width()*0.60);
var top =($(window).height()*0.10);
var index = layer.open({
title:'配置权限',
area: width+'px',//大小定宽，高度自适应
fixed: false, //不固定
maxmin: false,//显示最大最小化按钮
zIndex:1500,//层
offset:top+'px',//定义坐标
scrollbar:true,//显示滚动条
shadeClose: false,//点击外部不关闭
shade:0.4,//阴影
type:1,
content:$('#setPermissionModal')
});
//向页面隐藏index
$("#hidden_setPermission_index").val(index);
为了实现更好的模态框效果，我们可以设置样式:
HTML:
<!--2.修改字典模态框-->
<%--隐藏打开的index--%>
<input type="hidden" id="hidden_update_index">
<div class="x-body" style="display: none" id="updateModal">
<form class="layui-form" id="updateDictionaryForm">
<!--0.隐藏上级字典编号-->
<div class="layui-form-item">
<label for="dictionaryname" class="layui-form-label">
上级字典
</label>
<div class="layui-input-inline">
<input type="text" id="update_updictionaryname" disabled class="layui-input" value="">
<%--隐藏需要修改的字典编号--%>
<input type="hidden" name="dictionaryid" id="update_dictionaryid">
</div>
</div> <!--1.字典名称-->
<div class="layui-form-item">
<label for="dictionaryname" class="layui-form-label">
字典名称
</label>
<div class="layui-input-inline">
<input type="text" id="update_dictionaryname" name="dictionaryname" required="" lay-verify="required"
autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">
<span class="x-red">*</span>必须填写
</div>
</div>
<!--2 字典描述-->
<div class="layui-form-item layui-form-text">
<label for="dictionaryname" class="layui-form-label">
字典描述
</label>
<div class="layui-input-inline">
<input type="text" name="description" lay-verify="required" id="update_description"
autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">
<span class="x-red">*</span>必须填写
</div>
</div>
<%--3.字典启用状态--%>
<div class="">
<label for="dictionaryname" class="layui-form-label">
字典状态
</label>
<div class="">
<input type="radio" name="isuse" class="update_isuse" value="1" title="启用">
<input type="radio" name="isuse" class="update_isuse" value="0" title="禁用" >
</div>
</div>
<%--提交按钮--%>
<div class="layui-form-item">
<button class="layui-btn" lay-submit lay-filter="updateDictionary" type="button">修改</button>
</div>
</form>
</div>
JS:
/*************S 修改字典相关操作************/
/**
* 打开修改字典信息模态框
* @param obj 将修改按钮自己传下来
*/
function openUpdateDict(obj){
var tr= $(obj).parent().parent();//获取到tr元素
var update_dictionaryid = tr.children("td:eq(0)").children("input:hidden").val();//字典变
var update_dictionaryname = tr.children("td:eq(2)").text();//字典名称
var update_updictionaryname = tr.children("td:eq(3)").text();//上级字典名称
var update_description = tr.children("td:eq(4)").text();//字典描述
var update_isuse = tr.children("td:eq(5)").children("input:hidden").val();//字典状态
$("#update_dictionaryid").val(update_dictionaryid);
$("#update_dictionaryname").val(update_dictionaryname);
$("#update_updictionaryname").val(update_updictionaryname);
$("#update_description").val(update_description);
/* $(".update_isuse").each(function () {
if($(this).val()==update_isuse){
alert($(this).val())
$(this).prop("chcked","checked");
}
});*/
$(".update_isuse:radio").removeAttr("checked");//删除checked属性
$(".update_isuse:radio[value='"+update_isuse+"']").attr("checked", true);
form.render('radio'); //重新渲染radio单选框
var width=($(window).width()*0.80);
var height=($(window).height()*0.70);
var index = layer.open({
title:'修改字典信息',
area: [width+'px', height +'px'],//大小
fix: true, //不固定
maxmin: true,
zIndex:500,
shadeClose: false,
shade:0.4,
type:1,
content:$('#updateModal')
});
//向页面隐藏index
$("#hidden_update_index").val(index);
} //监听修改表单的提交事件
layui.use(['layer','form'],function () {
var layer = layui.layer,form = layui.form;
form.on('submit(updateDictionary)', function(data){
$.ajax({
url:contextPath+"/dictionary/updateDict.do",
data:data.field,
type:'post',
datatype:'text',
success:function (response) {
layer.msg(response,{time:1500},function () {
if("修改成功"==response){
layer.close($("#hidden_update_index").val()); //关闭当前窗口
window.location.reload();//刷新页面
}
});
}
});
});
})
/*************E 修改字典相关操作************/
关于更多的参数解释参考:http://www.layui.com/doc/modules/layer.html
layui实现类似于bootstrap的模态框功能的更多相关文章
- WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法
由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...
- Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...
- bootstrap的模态框的使用
bootstrap的模态框 如果只想单独使用模态框功能,可以单独引入modal.js,和bootstrap的css,在bootstrap的包中,可引入bootstrap.js. 用法 通过data属性 ...
- Bootstrap 3 模态框播放视频
Bootstrap 3 模态框播放视频 I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. I ...
- Bootstrap 实例 - 模态框（Modal）插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- bootstrap的模态框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap -- 插件: 模态框、滚动监听、标签页
Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...
- Bootstrap中模态框多层嵌套时滚动条问题
在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...
- 黄聪：bootstrap中模态框modal在苹果手机上会失效
bootstrap中模态框在苹果手机上会失效 可将代码修改为<a data-toggle="modal" data-target="#wrap" hre ...
随机推荐
- javascript之容易出错的地方
1: 不是所有的非空对象都有toString()方法的 var obj = Object.create(null); console.log(obj.toString()); // false; ...
- php面试必知必会常见问题
1 说出常用的10个数组方法 我觉得数组比较最能体现PHP基础语法的一个数据结构了,下面给大家列一下常用的10个关于操作数组的函数 in_array(判断数组中是否有某个元素) implode(将数组 ...
- delphi self 的使用
delphi之self 在使用delphi的对象技术的时候,经常会看到一个词汇:self,它到底指的是什么呢? 我们还要从对象与类的关系谈起. 类是对将要创建的对象的性质的描述,是一种文档.这很重要: ...
- JMeter脚本强化之检查点
上一篇讲述了对脚本做参数化的两种方法,并对参数化设置结果做了简单的验证,就是通过添加断言.本篇将详细一点介绍怎么使用断言做文本检查,或者叫做设置检查点. 首先来看看下面的三个图,这三个图是用查看结果树 ...
- wp如何代码重启手机
用过windows phone手机操作系统的人都知道,wp的系统设置界面很长一串,我们并不能快速进入想要的设置项,更受不了的是有些常用的设置项竟然在最下边.因为前段时间没事做,于是乎写了个wp的工具类 ...
- VS中碰到的问题
1.调试的时候,语句已经注释掉了,但是在执行的时候还是运行了(或者某些变量值改变后,程序依然用的之前数据). 右键解决方案-->清理,然后重新生成.
- BZOJ4892 Tjoi2017dna（后缀数组）
对每个子串暴力匹配至失配三次即可.可以用SA查lcp.然而在bzoj上被卡常了.当然也可以二分+哈希或者SAM甚至FFT. #include<iostream> #include<c ...
- 【刷题】BZOJ 2096 [Poi2010]Pilots
Description Tz又耍畸形了!!他要当飞行员,他拿到了一个飞行员测试难度序列,他设定了一个难度差的最大值,在序列中他想找到一个最长的子串,任意两个难度差不会超过他设定的最大值.耍畸形一个人是 ...
- smb(ms17-010)远程命令执行之msf
本次用到的环境: kali(2016.2)32位系统.ip地址:192.168.1.104 目标靶机为:win7sp1x64系统(关闭防火墙),ip地址:192.168.1.105 具体的步骤如下: ...
- JAVA本地TXT文件解决中文乱码问题
import java.io.*; public class ReadFile { public static void main(String[] args) { try { File file = ...