以前习惯了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. Linux下编译程序时，经常会遇到“undefined reference to XXX” 报错，

    Linux下编译程序时,经常会遇到“undefined reference to XXX” 报错, 这里总结一些可能的原因和解决方案,给需要的朋友: 说道undefined reference err ...

  2. Exception: com.mysql.jdbc.exceptions.jdbc4.MySQLTransactionRollbackException: Deadlock found when trying to get lock; try restarting transaction

    我在update数据库的时候出现的死锁 数据库表死锁 Exception: com.mysql.jdbc.exceptions.jdbc4.MySQLTransactionRollbackExcept ...

  3. Redis 备份数据的两种方式

    既然是数据库,那就一定有数据备份方式了,而且 Redis 是内存形式的数据库,更需要数据备份了,要不然断电数据就全都丢失了. Redis 数据备份有两种方式: RDB(数据快照) AOF(记录操作日志 ...

  4. Linux服务器ping不通域名出现的unknown host 错误解决办法

    "ping: unknown host www.baidu.com" 解决方法 如果某台Linux服务器ping不通域名, 如下提示: # ping www.baidu.compi ...

  5. CSUOJ 1141——第四届河南省程序设计大赛

    题目的意思是给你一个机器人,初始的时候在某一个给定的路灯位置,机器人要把路边所有的路灯关掉,每个路灯都有一个距离和一个功率,求要把所有的路灯关掉最小的最终能耗是多少? 题目是一个很明显的区间DP.可以 ...

  6. BZOJ 2118 墨墨的等式(最短路)

    很开拓眼界的题.. 题意:给出一个n元一次方程形如a1*x1+a2*x2...+an*xn=B,求满足解集为非负整数的B值在[L,R]范围内的种数.(n<=12,ai<=5e5,L< ...

  7. 【poj2409】Let it Bead Polya定理

    题目描述 用 $c$ 种颜色去染 $r$ 个点的环,如果两个环在旋转或翻转后是相同的,则称这两个环是同构的.求不同构的环的个数. $r·c\le 32$ . 题解 Polya定理 Burnside引理 ...

  8. 【CodeChef PREFIXOR】Prefix XOR

    https://odzkskevi.qnssl.com/f0fbdb108ec813b1294f8f714805963b?v=1502083692 网上搜到的题解: http://blog.csdn. ...

  9. c++字符串排序

    在主函数中输入10个等长的字符串,用另一函数对它们排序.然后在主函数输出这10个已排好序的字符串. 用两种方法完成. 方法一:用二维数组做函数参数: 方法二:用指向一维数组的指针做函数参数. 方法一: ...

  10. 【BZOJ2216】Lightning Conductor（动态规划）

    [BZOJ2216]Lightning Conductor(动态规划) 题面 BZOJ,然而是权限题 洛谷 题解 \(\sqrt {|i-j|}\)似乎没什么意义,只需要从前往后做一次再从后往前做一次 ...