JQuery $.layer弹出层使用

2019独角兽企业重金招聘Python工程师标准>>>

官方地址：http://sentsin.com/jquery/layer/ 

1. 引入jquery包

2. 引入$.layer插件包

   demo

---

1.引入相应相应的js

<!-- 弹出层插件 -->
<link type="text/css" href="${basePath}js/layer/skin/layer.css" rel="stylesheet" />
<script src="${basePath}js/layer/layer.min.js"></script>

2.js代码（为class/id属性绑定的点击事件）

//为某个class绑定的点击事件
$('.stuClockframe').on('click', function() {
		$.layer({
			type : 2,
			title: ['测试弹框', 'background:#159bdd;'],
			maxmin : true,//是否开启最大/最小化
			border: [7, 0.43, '#1570b6'],
			shadeClose : true, //开启点击遮罩关闭层
			area : [ '750px', '500px' ],//设置弹框的高度和宽度，也可用百分比
			offset : [ '10%', '' ],
			iframe : {
				src : '${basePath}controll/method.do' //访问的连接地址，也可是静态页面
			}
		});
	});

2.js函数弹框

function show(studentId,uniqueid){
	$.layer({
		type : 2,
		title: ['弹框标题', 'background:#159bdd;'],
		maxmin : false,
		border: [7, 0.43, '#1570b6'],
		shadeClose : true, 
		area : [ '400px', '250px' ],
		offset : [ '10%', '' ],
		iframe : {
			src : ''
		}
	});
}

其中src地址可以是action访问/超链接/静态页面地址

就是将访问的页面嵌入进这个弹出层的iframe中

3.关闭弹出层事件

parent.layer.close(parent.layer.getFrameIndex(window.name));

4.调用父窗口属性和值

//拿到父窗口的值
parent.$("#send").val("");
//调用父页面的函数
parent.ref();

更多示例参考官方demo

转载于:https://my.oschina.net/u/1170536/blog/372788