有时候我们在网页制作中需要引用各种弹出框,弹出框的展现形式多种多样。
可以是弹出图片,视频,文字,也可以是弹出图片轮播等形式;

弹出框插件——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插件的更多相关文章

  1. Bootstrap 弹出框(Popover)插件

    Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstr ...

  2. 弹出框layer的使用封装

    layer弹出框官方网址:http://layer.layui.com/ layer常用方法的封装:layerTool.jsp layer.config({ extend: 'extend/layer ...

  3. jQuery弹出层layer插件的使用

    引入插件layer 触发弹出层的按钮/链接 <a href="javascript:showPop();"> <img src="" /> ...

  4. JQ弹出框移动-插件分享~~~

    <script src="js/jQuery8.3.js" type="text/javascript"></script> <s ...

  5. 弹出框sweetalert插件的简单使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-3 模态弹出框

    模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...

  7. Layui 好用的弹出框

    layui的下载地址: http://www.layui.com/ 需要引用layui里面的css跟js layui自带jquery var $ = layui.$ 一个直接弹出另一个窗体的弹出框 w ...

  8. 弹出框插件layer使用

    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...

  9. layer弹出框插件参数及方法介绍

    layerui下载:http://www.layui.com 更多参数请阅读开发文档:http://www.layui.com/doc/modules/layer.html Layui 是一款采用自身 ...

随机推荐

  1. Python实现——一元线性回归(最小二乘法)

    2019/3/24 线性回归--最小二乘法公式法 暂时用python成功做出来了图像,但是其中涉及到的公式还是更多的来自于网络,尤其是最小二乘法公式中的两个系数的求解,不过目前看了下书高数也会马上提及 ...

  2. Nagios监控平台搭建及配置文件详解

    Nagios是一款开源的免费网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报警第一时间通知网站运维人员, ...

  3. SDUT OJ 数据结构实验之链表八:Farey序列

    数据结构实验之链表八:Farey序列 Time Limit: 10 ms Memory Limit: 600 KiB Submit Statistic Discuss Problem Descript ...

  4. Qt 学习之路 2(42):QListWidget、QTreeWidget 和 QTableWidget

    Qt 学习之路 2(42):QListWidget.QTreeWidget 和 QTableWidget 豆子 2013年2月5日 Qt 学习之路 2 38条评论 上一章我们了解了 model/vie ...

  5. SQL函数:返回传入的字符中的数字或者字符

    /******返回传入的字符串的所有字符 ******/SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOALTER function [dbo].[F_Get ...

  6. RabbitMQ 在Linux环境中的默认位置

    参考:https://www.rabbitmq.com/relocate.html

  7. LOJ6502. 「雅礼集训 2018 Day4」Divide(构造+dp)

    题目链接 https://loj.ac/problem/6502 题解 中间一档部分分提示我们将所有的 \(w_i\) 排序. 考虑如果我们能构造出这样一个 \(w_i\) 的序列,使得该序列满足:对 ...

  8. Luogu P2572 [SCOI2010]序列操作 线段树。。

    咕咕了...于是借鉴了小粉兔的做法ORZ... 其实就是维护最大子段和的线段树,但上面又多了一些操作....QWQ 维护8个信息:1/0的个数(sum),左/右边起1/0的最长长度(ls,rs),整段 ...

  9. [微信小程序] -- wxss引用外部css文件及iconfont

    小程序引入外部文件的方式是: 只需要在其css文件写上: @import "外部css地址.wxss"; 因为项目需要, 小程序中需要使用iconfont , 很容易就想到了H5的 ...

  10. javascript 中typeOf

    JS中的变量是松散类型(即弱类型)的,可以用来保存任何类型的数据. typeof 可以用来检测给定变量的数据类型,可能的返回值: 1. 'undefined' --- 这个值未定义: 2. 'bool ...