弹出框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 是一款采用自身 ...
随机推荐
- [Swift]八大排序算法(五):插入排序
排序分为内部排序和外部排序. 内部排序:是指待排序列完全存放在内存中所进行的排序过程,适合不太大的元素序列. 外部排序:指的是大文件的排序,即待排序的记录存储在外存储器上,待排序的文件无法一次装入内存 ...
- 【guava】对象处理
一,equals方法 我们在开发中经常会需要比较两个对象是否相等,这时候我们需要考虑比较的两个对象是否为null,然后再调用equals方法来比较是否相等,google guava库的com.goog ...
- numpy.histogram 官方手册
numpy.histogram numpy.histogram(a, bins=10, range=None, normed=False, weights=None, density=None) Co ...
- Python数据结构,计算问题
2018-08-12 <Python 算法>以及<用Python解决数据结构和算法> 什么是算法? 在计算机的世界中,算法本质上是我们对某一个问题或则某一类问题的解决方案. ...
- Qt 学习之路 2(28):坐标系统
Qt 学习之路 2(28):坐标系统 豆子 2012年11月25日 Qt 学习之路 2 59条评论 在经历过实际操作,以及前面一节中我们见到的那个translate()函数之后,我们可以详细了解下 Q ...
- 【KMP】【矩阵加速】【递推】洛谷 P3193 [HNOI2008]GT考试 题解
看出来矩阵加速也没看出来KMP…… 题目描述 阿申准备报名参加 GT 考试,准考证号为\(N\)位数\(X_1,X_2…X_n(0\le X_i\le9)\),他不希望准考证号上出现不吉利的数 ...
- fread 快速读入 (神奇挂!)
注意这里是将后台的所有数据都读入在计算 #include<bits/stdc++.h> using namespace std; #define ll long long namespac ...
- vim的多窗口功能与环境参数设置
Vim的多窗口功能 多窗口情况下按键功能 :sp [filename] 打开一个新的窗口,如果有加filename,表示在新窗口打开一个新文件,否则表示两个窗口为同一文件内容 :[ctrl]+w+j( ...
- Jquery 循环内间隔执行 异步执行
<script type="text/javascript"> var arr = new Array(); var arrk = 0; jQuery(function ...
- html自定义垂直导航菜单(多级导航菜单,去掉font-awesome图标,添加自己的箭头图标)
这次在原先html自定义垂直导航菜单的基础上做了比较大的改动: 1.去掉了font-awesome图标,上级菜单右边的箭头是自己用css写的,具体参考<css三角箭头>. 2.去掉了初始化 ...