弹出框layer插件
有时候我们在网页制作中需要引用各种弹出框,弹出框的展现形式多种多样。
可以是弹出图片,视频,文字,也可以是弹出图片轮播等形式;
弹出框插件——layer使用方法(其实官方文档中已经介绍的很详细):
下载layer文件,下载好的文件不用修改,路径也不能乱改。
layer插件运行环境是jQuery1.8及以上,因为layer是基于jQuery的一个插件,必须引入。
layer引入文件的代码应该放在页面底部。
代码:
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/layer.js"></script>
<script type="text/javascript">
$('#video_play').on('click', function(){
layer.open({
type: 1,
area: ['854px', '505px'],
shade: 0.6, //点击遮罩关闭
shift:0,
title:'Rich New',
content: '<div style="margin-top:-25px;" id="video"><video class="video-js vjs-default-skin" controls="controls" preload="auto" width="854px" height="480px" poster="images/s12_video-english.jpg" data-setup="{}"><source src="video/s12_video-english.mp4" type="video/mp4" /><source src="video/s12_video-english.webm" type="video/webm" /><source src="video/s12_video-english.ogv" type="video/ogg" /></video></div>'
});
});
</script>
官方:
//在这里面输入任何合法的js语句
layer.open({
type: 1, //page层
area: ['500px', '300px'],
title: '你好,layer。',
shade: 0.6, //遮罩透明度
moveType: 1, //拖拽风格,0是默认,1是传统拖动
shift: 1, //0-6的动画形式,-1不开启
content: '<div style="padding:50px;">这是一个非常普通的页面层(type:1),传入了自定义的html</div>'
});
弹出框layer插件的更多相关文章
- Bootstrap 弹出框(Popover)插件
Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstr ...
- 弹出框layer的使用封装
layer弹出框官方网址:http://layer.layui.com/ layer常用方法的封装:layerTool.jsp layer.config({ extend: 'extend/layer ...
- jQuery弹出层layer插件的使用
引入插件layer 触发弹出层的按钮/链接 <a href="javascript:showPop();"> <img src="" /> ...
- JQ弹出框移动-插件分享~~~
<script src="js/jQuery8.3.js" type="text/javascript"></script> <s ...
- 弹出框sweetalert插件的简单使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-3 模态弹出框
模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...
- Layui 好用的弹出框
layui的下载地址: http://www.layui.com/ 需要引用layui里面的css跟js layui自带jquery var $ = layui.$ 一个直接弹出另一个窗体的弹出框 w ...
- 弹出框插件layer使用
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...
- layer弹出框插件参数及方法介绍
layerui下载:http://www.layui.com 更多参数请阅读开发文档:http://www.layui.com/doc/modules/layer.html Layui 是一款采用自身 ...
随机推荐
- 【Spring Boot-技巧】API返回值去除为NULL的字段
简介 在前后端分离的微服务时代,后端API需要良好的规范.本篇主要将一个数据返回时的一个小技巧-- 过滤为空字段 解决痛点:将有效解决数据传输过程中的流量浪费. 组件简介 Jackson Object ...
- 按钮重复点击问题 UIbutton
.h #import <UIKit/UIKit.h> #import <objc/runtime.h> @interface UIControl (XY) @property ...
- [PowerShell]HTML parsing -- get information from a website
link: http://stackoverflow.com/questions/9053573/powershell-html-parsing-get-information-from-a-webs ...
- LCT小小结
模板题P3690 基础题P3203[HNOI2010]弹飞绵羊 \(access\)是搞出一条端点为\(x,y\)的路径 , 且维护的是实子树的信息 . 由于题目比较简单 , \(access\)时还 ...
- Jsch初步
[From] http://xpenxpen.iteye.com/blog/2061869 上一篇文章我们成功搭建了sshd服务器,并通过3种方式登陆上了ssh.这一篇我们将用开源jar包jsch来登 ...
- aoj0558
一.题意: 在H * W的地图上有N个奶酪工厂,分别生产硬度为1-N的奶酪.有一只吃货老鼠准备从老鼠洞出发吃遍每一个工厂的奶酪.老鼠有一个体力值,初始时为1,每吃一个工厂的奶酪体力值增加1(每个工厂只 ...
- java c c++大学补遗
第一次面试时的问题是一个看起来50多数的老工程师问的, 仍然记忆犹新 java(面向对象)的基本特性? 封装 继承 多态 工作几年后,各种框架用来用去, 回想起这个问题,java也就剩下这几个特性了
- ajax请求方法及参数说明
$.ajax()请求示例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 2、java内存间交互操作
关于主内存与工作内存之间具体的交互协议,即一个变量如何从主内存拷贝到工作内存,如何从工作内存同步回主内存之类的实现细节,java内存模型中定义了8种操作来完成,虚拟机实现时必须保证这8种操作都是原子的 ...
- MySQL搭建Amoeba_读写分离
一.背景知识 Amoeba(变形虫)项目,专注 分布式数据库 proxy 开发.座落与Client.DB Server(s)之间.对客户端透明.具有负载均衡.高可用性.sql过滤.读写分离.可路由相关 ...