弹出框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 是一款采用自身 ...
随机推荐
- linux系统安全及应用——端口扫描
NMAP是一款强大的网络扫描安全监测工具,通过扫描网络中不需要的服务端口来关闭这些服务,提高安全性.官网是http://nmap.org/,linux安装光盘中自带软件nmap-5.51.3.el6. ...
- JDBC_ResultSet结果集用法_游标原理_关闭连接问题
依次关闭使用对象及连接 ResultSet---Statement--Connectionimport java.sql.Connection;import java.sql.DriverManage ...
- 华为敏捷DevOps实践:产品经理如何开好敏捷回顾会议
大家好,我是华为云DevCloud项目管理服务的产品经理 恒少:) 作为布道师和产品经理,出差各地接触客户是常态,经常和华为云的客户交流.布道.技术沙龙,但是线下交流,覆盖的用户总还是少数.我希望借助 ...
- SDUT OJ 数据结构实验之二叉树七:叶子问题
数据结构实验之二叉树七:叶子问题 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descri ...
- CentOS 7 基础网络管理
网络服务管理 network服务是对整个计算机网络服务的控制,也可以理解为控制所有网卡. [root@localhost ~]# systemctl start network //开启网络服务 [r ...
- SQL Server2012如何更改服务器的名称
Problem: sql server 2012 安装完毕后,连接数据库只能使用 机器名\数据库实例 的方式,想用 localhost 或 . 作为服务器名称不可以 Solution: 参考:http ...
- HDOJ3085 Nightmare II 双向BFS
重构一遍就A了...但这样效率太低了...莫非都要重构???QWQ 每一秒男同志bfs3层,女同志bfs1层.注意扩展状态时,要判一下合不合法再扩展,而不是只判扩展的状态合不合法,否则有可能由非法的走 ...
- POJ_2480 Longge's problem【积性函数+欧拉函数的理解与应用】
题目: Longge is good at mathematics and he likes to think about hard mathematical problems which will ...
- 石头剪刀布(2019Wannafly winter camp day3 i) 带权并查集+按秩合并 好题
题目传送门 思路: 按照题意描述,所有y挑战x的关系最后会形成一棵树的结构,n个人的总方案数是 3n 种,假设一个人被挑战(主场作战)a次,挑战别人(客场)b次,那么这个人存活到最后的方案数就是3n* ...
- 洛谷P2709 小B的询问
题目描述 小B有一个序列,包含N个1~K之间的整数.他一共有M个询问,每个询问给定一个区间[L..R],求Sigma(c(i)^2)的值,其中i的值从1到K,其中c(i)表示数字i在[L..R]中的重 ...