Layer弹出层的一个使用

开发工具与关键技术：MVC

作者：盘洪源

撰写时间：2019年5月15日星期三

在做到一个点击按钮弹出一个弹出层的的时候，我发现用以前的那种弹出层都是不能通过鼠标来拖动的。可以用鼠标拖动的这种弹出层这个是需要引入layui插件的。



这个可移动的弹出层是用layui里面的layer搭建的。这个是怎么用的？

首先先把你所需要弹出的弹出层的HTML写好，这个是必须的，在写好完HTML后就可以把这个模态框先隐藏起来，把display属性设置为none。

把layui的js引入后就渲染layer

var layer;

    $(function () {

        layui.use(['layer'], function () {

            layer = layui.layer;

        })

})

渲染后再给个弹出层那个按钮点击事件，看下面代码

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

        $('#layerNoticeTypeDetailed

input[type=“reset”]’).click();

        layerIndex = layer.open({

            type: 1,

            area: ["600px", "500px"],

            offset: "auto",

            title: "基础信息维护",

content: $("#layerNoticeTypeDetailed"),

            resize: false

        });

        $("#contents").attr("src",

“/MessageMaintain/BasicsMessage/Index”);

})

BrowseHistory这个是点击按钮ID

$(’#layerNoticeTypeDetailed input[type=“reset”]’).click();这个是重置表单的。

 Type基本层类型，可以输入0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）

 Title这个弹出层的标题

 Area这个弹出层的宽高，在默认状态下，宽高是自适应的，如果想要自定义宽高的话就用这个属性。

 Offset这个弹出层的坐标，这个auto是垂直水平居中。

 Content这个就是放你这个弹出层HTML的ID，就是放内容的。

这个是简单的可移动的弹出层。

还有一个layer的提示框也挺好用的，用法也很简单。

layer.alert(‘请填写完整’, { icon: 0 });

这是一个简单的提示框，这个是有确定，取消按钮的，

还有一种没有按钮的，只是出现几秒就消失那种

layer.msg(‘请填写完整’, { icon: 0 })

用到的layui插件，里面的layer的属性很多，我这里可能讲的不够详细，想要了解更多的可以自已去看看layui插件里面的内容