layer弹框在实际项目中的一些应用

简介: layer弹框在实际项目中的一些应用

官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer。

受到如此追捧也是有原因的,使用起来快速方便容易上手,界面美观大方不累赘,看上去很舒服,在项目中用到一部分,也记录下一些常用的功能和属性

一:弹出到另外一个页面的写法,及其关闭,添加保存之后关闭页面的写法

运用:点击添加按钮,弹出另外一个页面

 $("#adduser").on("click", function() {
        layer.open({
            type : 2,
            title : '添加标签',
            area : [ '800px', '470px' ],
            fix : false, // �
            content :'useradd.jsp',
            end : function() {
            }
        });
    });

页面点击关闭按钮和添加后保存按钮逻辑代码:

//添加后保存
    var index = parent.layer.getFrameIndex(window.name);
    $("#addBtn").on("click", function() {
        $.ajax({
            url : "xxxxxxxxxx",
            data : {
                loginName : $("#loginName").val(),
                username : $("#username").val(),
                password : $("#password").val(),
                rePassword:$("#rePassword").val(),
                xxxxx : $("#xxxxxxxxxxx option:selected").val(),
            },
            type : "post",
            success : function(data) {
            }
        }); 
    })
     $('#close').on('click', function() {
        parent.layer.close(index);
    }) 


二:自定义位置 offset: ['90px', '900px']

类型:String/Array,默认:'auto'

默认垂直水平居中。当你只想定义top时,你可以offset: '100px'。当您top、left都要定义时,你可以offset: ['100px', '200px']。除此之外,你还可以定义offset: 'rb',表示右下角。其它的特殊坐标,你可以自己计算赋值。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>layer弹框属性</title> 
</head> 
<body> 
</body> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script  src="layer.js"></script>
<script>
layer.msg('请稍后', {
  icon: 14,
  //shade: 0.01,
  offset: ['90px', '900px']
});
</script>
</html>
三:自定义弹框大小(宽度和高度)
var index= layer.msg('尼玛,打个酱油', {icon: 4});
layer.style(index, {
width: '200px',
height:'200px'
});
四:设置layer.msg弹窗时间

msg弹框自带消失属性,有的用于注册成功之后的提示框几秒后消失,当然如果需要手动设置弹框时间,代码如下:弹出提示信息,4秒后自动消失

<script>
layer.msg('提示信息', 
{time:4000}
);
//1000就是1秒;依次类推;
</script>


五:弹框图标 一览表
<script>
layer.msg('图标显示', {
  icon: 14,
  //shade: 0.01,
});
</script>
六:常见例子:加载层和loading层以及更多弹出实例:
//加载层
var index = layer.load(0, {shade: false}); //0代表加载的风格,支持0-2
//loading层
var index = layer.load(1, {
  shade: [0.1,'#fff'] //0.1透明度的白色背景
});
相关文章
|
6月前
|
JavaScript 前端开发
layui用layer.open打开子页面并获取子页面的ueditor富文本编辑器的内容
该内容描述了一个Web应用的交互流程,其中父页面通过调用子页面的JavaScript函数来获取富文本编辑器的内容。子页面包含一个富文本编辑器和一个`callbackdata`函数,用于返回编辑器的文本内容。父页面使用`layer.open`打开子页面作为弹窗,并在用户点击提交时,访问子页面的`callbackdata`获取编辑器内容,同时检查其他表单字段,如类型、标题等是否为空,以确保数据完整。
576 0
|
前端开发 定位技术
layer弹框右上角关闭按钮的样式
layer弹框右上角关闭按钮的样式
228 0
解决layer弹框加载时闪白屏功能
解决layer弹框加载时闪白屏功能
71 1
|
6月前
|
JavaScript API
Element Plus组件库中的input组件如何点击查看按钮时不可编辑,点击编辑时可编辑使用setup
Element Plus组件库中的input组件如何点击查看按钮时不可编辑,点击编辑时可编辑使用setup
137 0
layer小提示弹框验证
layer小提示弹框验证
52 0
Layui 内置方法 - layer.setTop(置顶当前窗口)
Layui 内置方法 - layer.setTop(置顶当前窗口)
216 0
|
JavaScript
网站复制文字内容layer弹出提示框
今天教大家如何添加网站文字内容复制弹出提示框,提示版权信息,一个简单的js弹窗。
176 0
网站复制文字内容layer弹出提示框
|
JavaScript
【layui小技巧】layer使用layer.msg方法时如何让用户点击遮罩层就关闭消息框?layer.msg点击消失
【layui小技巧】layer使用layer.msg方法时如何让用户点击遮罩层就关闭消息框?layer.msg点击消失
847 0