layui弹出层html,layui弹出层效果实现代码-CSDN博客

本文详细介绍了layui弹出层的各种用法，包括多窗口模式、层叠置顶配置、透明询问框、公告层等不同类型的弹出效果，并提供了具体的代码示例。通过这些实例，读者可以更好地理解和应用layui弹出层功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文实例为大家分享了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) : '';

});

效果图：

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