layer弹出层
layer弹出层是基于jQuery的js插件。应用步骤如下:
1.引入jQuery核心包和layer.js文件
2.调用layer的插件函数
3.layer的主要配置项
(1)title:标题
(2)maxmin:最大化最小化控件
(3)area:弹出层宽高
(4)type:弹出层类型(值为0-4)
type=0时,content中填写显示的内容
type=1时,content中为对象,弹出当前页面的一个块
type=2时,content中为文件地址,弹出另一个文件
(5)content:弹出层内容
(6)主要函数:
layer.alert(‘弹出框’);
layer.confirm(‘提示选择框’);
4.实例
测试页面test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layer弹出层测试</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="layer.js"></script>
</head>
<body>
<div id="d">div标签中的内容</div>
<script type="text/javascript">
// (1)type=0,content中填写显示的内容
// layer.ready(function(){
// layer.open({
// type:0,
// title:'弹出层测试1',
// maxmin:true,
// area:['800px','500px'],
// content:'第一个弹出层测试'
// })
// })
// (2)type=1, content=对象,弹出当前页面中的一个块
// layer.ready(function(){
// layer.open({
// type:1,
// title:'弹出层测试2',
// maxmin:true,
// area:['800px','500px'],
// content:$('#d')
// })
// })
// (3)type=2,content=文件地址,将另一个文件弹出
layer.ready(function(){
layer.open({
type:2,
title:'弹出层测试3',
maxmin:true,
area:['800px','500px'],
content:'a.html'
})
})
</script>
</body>
</html>
弹出文件a.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
<p>弹出层测试文件</p>
</body>
<script type="text/javascript">
//绑定点击事件,关闭弹出层
$(document).click(function(){
//获取弹出层id
var index = parent.layer.getFrameIndex(window.name);
//调用layer.close方法,关闭弹出层
parent.layer.close(index);
})
</script>
</html>
代码及相关文件详见GitHub主页 弹出层插件layer