layui弹出层效果实现代码


Posted in Javascript onMay 19, 2017

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

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>弹出层</title>
 <link rel="stylesheet" href="layui/css/layui.css" media="all">
 <link rel="stylesheet" href="css/global.css" media="all">
 </head>
 <body>
 <blockquote class="layui-elem-quote">
  大部分演示都在layer独立组件的官网,与内置的layer模块,用法是完全一致的
 </blockquote>
 <fieldset class="layui-elem-field layui-field-title site-demo-button" style="margin-top: 30px;">
  <legend>特殊例子</legend>
 </fieldset>

 <div class="site-demo-button" id="LAY_demo" style="margin-bottom: 0;">
  <blockquote class="layui-elem-quote layui-quote-nm">
  Tips:为了更清晰演示,每触发下述一个例子之前,都会关闭所有已经演示的层
  </blockquote>
  <button data-method="setTop" class="layui-btn">多窗口模式,层叠置顶</button>
  <button data-method="confirmTrans" class="layui-btn">配置一个透明的询问框</button>
  <button data-method="notice" class="layui-btn">示范一个公告层</button>
  <button data-method="offset" data-type="t" class="layui-btn layui-btn-normal">上弹出</button>
  <button data-method="offset" data-type="r" class="layui-btn layui-btn-normal">右弹出</button>
  <button data-method="offset" data-type="b" class="layui-btn layui-btn-normal">下弹出</button>
  <button data-method="offset" data-type="l" class="layui-btn layui-btn-normal">左弹出</button>
  <button data-method="offset" data-type="lt" class="layui-btn layui-btn-normal">左上弹出</button>
  <button data-method="offset" data-type="lb" class="layui-btn layui-btn-normal">左下弹出</button>
  <button data-method="offset" data-type="rt" class="layui-btn layui-btn-normal">右上弹出</button>
  <button data-method="offset" data-type="rb" class="layui-btn layui-btn-normal">右下弹出</button>
  <button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal">居中弹出</button>
 </div>

 <div class="layui-elem-quote" style="margin-top: 20px;">
  <p>Layui - 精心为你雕琢</p>
 </div>

 <script src="layui/layui.js"></script>
 <script>
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('大部分参数都是可以公用的<br>合理搭配,展示不一样的风格', {
 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: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗?亲!<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块,由于其用户基数较大,所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块,但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>'
 ,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: '<div style="padding: 20px 100px;">'+ text +'</div>'
 ,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) : '';
 });

});
</script>
 </body>
</html>

效果图:

layui弹出层效果实现代码

官网弹出层

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

Javascript 相关文章推荐
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
vue.js的提示组件
Mar 02 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
layui分页效果实现代码
May 19 #Javascript
layui前段框架日期控件使用方法详解
May 19 #Javascript
详解Node.js开发中的express-session
May 19 #Javascript
前端页面文件拖拽上传模块js代码示例
May 19 #Javascript
jQuery操作之效果详解
May 19 #jQuery
AngularJS中的promise用法分析
May 19 #Javascript
几种响应式文字详解
May 19 #Javascript
You might like
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
Python备份Mysql脚本
2008/08/11 Python
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
python编写简单爬虫资料汇总
2016/03/22 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
九年级科学教学反思
2014/01/29 职场文书
水电工岗位职责
2014/02/12 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
python中的装饰器该如何使用
2021/06/18 Python
利用js实现简单开关灯代码
2021/11/23 Javascript