layer弹出层

layer弹出层

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Visual Studio 2015，layer弹出层

作者： 梁柏源

撰写时间：2019-5-16

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

今天分享的是layer弹出层，layer弹出层和modal提示框，略有不同，layer弹出层可以做到model提示框的效果，但model提示框却做不按道layer弹出层的效果，因为layer弹出层是一个可以移动的窗体，还能拉伸，model提示框是个固定的窗体。

在此要注意一下layer并不是layui = layer ui，layer只是作为layui的一个弹出层模块。layer有两种模式，一种作为独立的组件来使用，还有一种就是作为layui模块来使用，因本人对第一种涉及尚浅，所以此只分享第二种。

在开始做layer弹出层之前，我们要引用插件，layui.css和layui.js，引用好后就可以使用啦。

首先得来个按钮

<nav aria-label="breadcrumb">

        <ol class="breadcrumb">

        ……

<li class="breadcrumb-item" id="unhang"><a href="JavaScript:;">解挂</a></li>

……  //前方无关代码过多，为了摆脱凑字数的嫌疑，所以这里用省略号带过    

</ol>

   </nav>

按钮设置好后就来把模态框的布局写一下：

 <!--解挂 模态框-->

    <div id="Unhangframe" style="display: none;">

        <div class="col-12 mt-3">

            <form id="formNoticeType" class="form-horizontal">

                    <!--导航条-->

                    <nav aria-label="breadcrumb">

                        <ol class="breadcrumb">

                            <li class="breadcrumb-item" id="extract">提取</li>

                            <li class="breadcrumb-item" id="delete">删除</li>

                        </ol>

                    </nav>

                    <!--页面布局-->

                    <!--表格头部-->

                    <h3 align="center" class="layui-bg-cyan">历史挂单浏览</h3>

                    <!--表格-->

                    <div class="row">

                        <div class="col">

                            @*构建表格*@

                            <table id="SelectionUuhang" lay-filter="SelectionUuhang"></table>

                        </div>

                    </div>

            </form>

        </div>

</div>

布局完成之后就是在script里写layer了。

$("#unhang").click(function () {

            $('#unhang input[type="reset"]').click();

            //弹出layer窗体

            layer.open({

                type: 1,//页面层

                area: ["752px", "516px"],//这里是设置窗体大小的，如果不设置会用默认的

                offset: "auto",//默认坐标，即垂直水平居中

                title: "选择单据",//标题//弹出框的标题，不写会默认为信息

//当然标题的样式也能设置。title：[‘选择单据’,’font-size：24px；’]；

//还有title：false可以隐藏标题栏

                content: $("#Unhangframe")

            });

        });

这样一个可移动的layer弹出层就完成了。顺便补给一下，layer中type有5中类型，

有0的信息框，如果你没有编写type，系统就会默认这个哦！除了信息框，其他的必须编写type（用layer.open时）；

有1的页面层，就是今天分享的这个啦，

有2的iframe层，相信这个都不陌生，iframe中的content是一个url，可以是路径也可以是图片，但是这个有个问题就是会出现滚动条，还是下面一条，右边一条的那种，你可以通过content：[‘url’,‘no’]去掉

还有3的加载层，就是页面加载时那个旋转的圈圈等等，

以及4的tips层，对这个本人也是在学习layer弹出层时看到的，并不了解，所以不做解释了。

接下来看图：

看到圈上的辣个没有，就是这次的主角了，但我们点击它时，就会这样：

弹出一个layer弹出层，也就是这个模态框。