layer弹出层 - 小谦_Jian
layer弹出层
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
版权声明：本文为Jianxq12原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。