JQuery $.layer彈出層使用

官方地址：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