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)
blank

相关推荐

  • 阿里短信服务集成_阿里短信发送平台

    阿里短信服务集成_阿里短信发送平台阿里短信集成,配置流程,代码实现

    2022年10月26日
  • Windows Azure AppFabric应用程序

    Windows Azure AppFabric应用程序WindowsAzureAppFabric团队在大步前进。在上个月发布服务总线队列和Topics到CTP之后,这个团队刚刚发布AppFabric应用程序到CTP。AppFabric应用程序简化了将服务组成一个应用程序的任务,但实际上,它似乎重写了平台作为服务的意义(PaaS)

    2022年10月16日
  • 记一次某网站实战

    记一次某企业实战0x00前言近段时间来也没怎么更新过博客,在这里就来水篇文章吧。前段时间一直在做项目,也来分享并且记录一下自己的一些成果,和一些小思路。0x01信息收集渗透的第一步肯定是

    2021年12月11日
  • java对象转换为json_java jsonarray

    java对象转换为json_java jsonarray2019独角兽企业重金招聘Python工程师标准>>>…

  • WebApp开发-Google官方教程

    WebApp开发-Google官方教程概览你可以使用viewport的元数据、CSS和Javascript来为不同分辨率的屏幕设置合适的页面本文档中的技术适用于Android 2.0及以上设备,针对默认的Android Browser中及在WebView中呈现的页面如果你在为Android开发Web应用或者在为移动设备重新设计一个Web应用,你需要仔细考虑在不同设备上你的页面看起来是怎样的。因为Android设备有不同款型

  • 理解 sudo 和 sudoers[通俗易懂]

    理解 sudo 和 sudoers[通俗易懂]在Linux上,只有root用户可以执行任何命令,其他用户必须使用sudo才可执行特殊的命令.sudo是通过sudoers进行配置的.默认配置/etc/sudoers:##ThisfileMUSTbeeditedwiththe’visudo’commandasroot.##Pleaseconsideraddinglocalcontentin/etc/sudoers.d/insteadof#directlymodifying

发表回复

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

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