layui弹出层html,layui弹出层效果实现代码

layui弹出层html,layui弹出层效果实现代码本文实例为大家分享了layui弹出层的具体代码,供大家参考,具体内容如下弹出层大部分演示都在layer独立组件的官网,与内置的layer模块,用法是完全一致的特殊例子Tips:为了更清晰演示,每触发下述一个例子之前,都会关闭所有已经演示的层多窗口模式,层叠置顶配置一个透明的询问框示范一个公告层上弹出右弹出下弹出左弹出左上弹出左下弹出右上弹出右下弹出居中弹出Layui-精心为你雕琢layui.u…

大家好,又见面了,我是你们的朋友全栈君。

本文实例为大家分享了layui弹出层的具体代码,供大家参考,具体内容如下

弹出层

大部分演示都在layer独立组件的官网,与内置的layer模块,用法是完全一致的

特殊例子

Tips:为了更清晰演示,每触发下述一个例子之前,都会关闭所有已经演示的层

多窗口模式,层叠置顶

配置一个透明的询问框

示范一个公告层

上弹出

右弹出

下弹出

左弹出

左上弹出

左下弹出

右上弹出

右下弹出

居中弹出

Layui – 精心为你雕琢

layui.use(‘layer’, function(){ //独立版的layer无需执行这一句

var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

//触发事件

var active = {

setTop: function(){

var that = this;

//多窗口模式,层叠置顶

layer.open({

type: 2 //此处以iframe举例

,title: ‘当你选择该窗体时,即会在最顶端’

,area: [‘390px’, ‘260px’]

,shade: 0

,maxmin: true

,offset: [ //为了演示,随机坐标

Math.random()*($(window).height()-300)

,Math.random()*($(window).width()-390)

]

,content: ‘http://layer.layui.com/test/settop.html’

,btn: [‘继续弹出’, ‘全部关闭’] //只是为了演示

,yes: function(){

$(that).click();

}

,btn2: function(){

layer.closeAll();

}

,zIndex: layer.zIndex //重点1

,success: function(layero){

layer.setTop(layero); //重点2

}

});

}

,confirmTrans: function(){

//配置一个透明的询问框

layer.msg(‘大部分参数都是可以公用的
合理搭配,展示不一样的风格’, {

time: 20000, //20s后自动关闭

btn: [‘明白了’, ‘知道了’, ‘哦’]

});

}

,notice: function(){

//示范一个公告层

layer.open({

type: 1

,title: false //不显示标题栏

,closeBtn: false

,area: ‘300px;’

,shade: 0.8

,id: ‘LAY_layuipro’ //设定一个id,防止重复弹出

,btn: [‘火速围观’, ‘残忍拒绝’]

,moveType: 1 //拖拽模式,0或者1

,content: ‘

你知道吗?亲!

layer ≠ layui

layer只是作为Layui的一个弹层模块,由于其用户基数较大,所以常常会有人以为layui是layerui

layer虽然已被 Layui 收编为内置的弹层模块,但仍然会作为一个独立组件全力维护、升级。

我们此后的征途是星辰大海 ^_^

,success: function(layero){

var btn = layero.find(‘.layui-layer-btn’);

btn.css(‘text-align’, ‘center’);

btn.find(‘.layui-layer-btn0’).attr({

href: ‘http://www.layui.com/’

,target: ‘_blank’

});

}

});

}

,offset: function(othis){

var type = othis.data(‘type’)

,text = othis.text();

layer.open({

type: 1

,offset: type //具体配置参考:http://www.layui.com/doc/modules/layer.html#offset

,id: ‘LAY_demo’+type //防止重复弹出

,content: ‘

‘+ text +’

,btn: ‘关闭全部’

,btnAlign: ‘c’ //按钮居中

,shade: 0 //不显示遮罩

,yes: function(){

layer.closeAll();

}

});

}

};

$(‘#LAY_demo .layui-btn’).on(‘click’, function(){

var othis = $(this), method = othis.data(‘method’);

active[method] ? active[method].call(this, othis) : ”;

});

});

效果图:

cd87e08ae2a67d86e15bd3590f230951.png

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/134046.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号