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 相关文章推荐
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
javascript清空table表格的方法
May 14 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 Javascript
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
PHP 数组教程 定义数组
2009/10/23 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
js数组操作常用方法
2014/05/08 Javascript
JSONP之我见
2015/03/24 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
下载糗事百科的内容_python版
2008/12/07 Python
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
python3实现名片管理系统
2020/11/29 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
python str字符串转uuid实例
2020/03/03 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
十佳班主任事迹材料
2014/01/18 职场文书
社区党务公开实施方案
2014/03/18 职场文书
2014年应急工作总结
2014/12/11 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
卢旺达饭店观后感
2015/06/05 职场文书