以前习惯了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的模态框功能的更多相关文章

  1. WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法

    由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...

  2. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  3. bootstrap的模态框的使用

    bootstrap的模态框 如果只想单独使用模态框功能,可以单独引入modal.js,和bootstrap的css,在bootstrap的包中,可引入bootstrap.js. 用法 通过data属性 ...

  4. Bootstrap 3 模态框播放视频

    Bootstrap 3 模态框播放视频 I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. I ...

  5. Bootstrap 实例 - 模态框（Modal）插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. bootstrap的模态框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. Bootstrap -- 插件: 模态框、滚动监听、标签页

    Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...

  8. Bootstrap中模态框多层嵌套时滚动条问题

    在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...

  9. 黄聪：bootstrap中模态框modal在苹果手机上会失效

    bootstrap中模态框在苹果手机上会失效 可将代码修改为<a  data-toggle="modal" data-target="#wrap" hre ...

随机推荐

  1. vue render & array of components & vue for & vue-jsx

    vue render & array of components & vue for & vue-jsx https://www.cnblogs.com/xgqfrms/p/1 ...

  2. Linux服务器开启tomcat的gc日志

    压力测试,为了能监控长期对gc的变化的情况,那么就需要在tomcat中进行配置相关的gc输入日志,以便后续来对gc中进行分析 工具 :linux+tomcat 1.进入到了tomcat的bin的目录下 ...

  3. 【.Net】vs2017 自带发布工具 ClickOnce发布包遇到的问题

    一.遇到的问题 在安装了vs2017 社区版(Community)之后  想打包安装程序(winform) 还是想用之前的 installshield来打包  发现居然打不了,在官网查了    ins ...

  4. UVA12585_Poker End Games

    题目是这样的,每个人手中有a和b的钱数,c为a和b中间最小的一个. 每个回合,两个人胜利的概率都是0.5,胜利者从失败者手中获得c的钱数. 如果有一个人手中没钱的话,那么他就failer,游戏结束. ...

  5. Flume日志收集系统架构详解--转

     2017-09-06 朱洁 大数据和云计算技术 任何一个生产系统在运行过程中都会产生大量的日志,日志往往隐藏了很多有价值的信息.在没有分析方法之前,这些日志存储一段时间后就会被清理.随着技术的发展和 ...

  6. wp开发（二）--获取用户篇

    本文从个人开发者的角度来谈如何让wp应用获得尽可能多的用户.当然前提是你的app有一定的竞争性,如果不具备竞争力,那再多的用户下载也是白扯,所以最关键的还是要保证app的质量. 一. 程序图标 千万不 ...

  7. Docker学习笔记五：Docker生成jenkins容器，支持Java Web项目持续集成、持续部署

    一.创建jenkins容器: 1.拉取jeknin镜像 sudo docker pull jenkins 2.创建一个jenkins目录 sudo mkdir /jenkins 3.在jenkins目 ...

  8. Alpha 冲刺 —— 十分之一

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作,对多个目标检测及文字识别模型进行评估.实验,选取较 ...

  9. Implement Queue by Two Stacks

    As the title described, you should only use two stacks to implement a queue's actions. The queue sho ...

  10. 电子商务(电销)平台中用户模块(User)数据库设计明细

    以下是自己在电子商务系统设计中的订单模块的数据库设计经验总结,而今发表出来一起分享,如有不当,欢迎跟帖讨论~ 用户基础表(user_base)|-- 自动编号 (user_id)|-- 用户名 (us ...