Layer弹出层的一个使用
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 () {
$('#layerNoticeTypeDetailedinput[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插件里面的内容
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/05/16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
