弹出框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>'
});

 

转载于:https://www.cnblogs.com/victor5230/p/5795649.html