前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Layer弹出层的一个使用

Layer弹出层的一个使用

作者头像
PHY_68
发布2020-09-16 14:32:46
1.3K0
发布2020-09-16 14:32:46
举报
文章被收录于专栏:laopan技术分享

Layer弹出层的一个使用

开发工具与关键技术:MVC

作者:盘洪源

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

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



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

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

把layui的js引入后就渲染layer

var layer;

代码语言:javascript
复制
    $(function () {

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

            layer = layui.layer;

        })

})

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

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

代码语言:javascript
复制
        $('#layerNoticeTypeDetailed

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

代码语言:javascript
复制
        layerIndex = layer.open({

            type: 1,

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

            offset: "auto",

            title: "基础信息维护",

content: $("#layerNoticeTypeDetailed"),

代码语言:javascript
复制
            resize: false

        });

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

“/MessageMaintain/BasicsMessage/Index”);

代码语言:javascript
复制
    })

BrowseHistory这个是点击按钮ID

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

代码语言:javascript
复制
 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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档