<!DOCTYPE HTML PUBLIC "">
<%@ page contentType="text/html; charset=UTF-8"%>
<html>
<head>
<title>Web</title>
<style type="text/css">
* {
	font-size: 13px;
}

.datagrid-toolbar {
	background: none;
}

input {
	padding: 3px 0 3px 0;
}

.easyui-combobox {
	height: 24px;
}

.combo-arrow {
	height: 24px;
}

.combo-text {
	height: 24px;
}

#operate-action {
	margin-top: 20px;
	padding: 10px 30px;
	border-top: 1px solid #CCCCCC;
	background: #EFEFEF;
}

#operate-action a {
	color: #2274ac;
	text-decoration: none;
}

#operate-action a:focus {
	color: #2274ac;
	text-decoration: none;
}

#operate-action a:active {
	color: #2274ac;
	text-decoration: none;
}

#operate-action a:hover {
	color: #FF762C;
	text-decoration: underline;
}

#operate-action a {
	margin-left: 20px;
}

.black_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1001;
	-moz-opacity: 0.8;
	opacity: .80;
	filter: alpha(opacity =   80);
}

.white_content {
	display: none;
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	border: 8px solid lightblue;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}

.white_content_small {
	display: none;
	position: absolute;
	top: 20%;
	left: 30%;
	width: 40%;
	height: 50%;
	border: 8px solid lightblue;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}
</style>
</head>
<body>
	<table id="datagrid" class="easyui-datagrid"
		style="width: 100%; height: 100%"
		data-options="width:800,height:500,idField:'keyid',toolbar:'#tb',
                      iconCls:'icon-tip',striped: true,fitColumns:true,singleSelect:true,
                      maximized:true,remoteSort: false,rownumbers:true"></table>

	<div id="tb" style="height: auto">
		<a href="javascript:void(0)" class="easyui-linkbutton"
			data-options="iconCls:'icon-reload',plain:true"
			οnclick="getServiceLs()">刷新</a> <a id="openDiv" href="javascript:void(0)"
			class="easyui-linkbutton"
			data-options="iconCls:'icon-reload',plain:true" οnclick="jqueryOpenDiv()">弹出DIV</a>
	</div>

	<div id="MyDiv" class="white_content">
		<div style="text-align: right; cursor: default; height: 40px;">
			<span style="font-size: 16px;" οnclick="jqueryCloseDiv()">关闭</span>
		</div>
		目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。<button id="testButton">点击Button</button>
	</div>

	<script type="text/javascript"
		src="<%=request.getContextPath()%>/pages/serverlist.js"></script>
</body>
</html>

 

function jqueryOpenDiv() {
	var left = $("#openDiv").offset().left;
	alert(left);
	var top = $("#openDiv").offset().top;
	alert(top);
	
	var positionX = left;
	var positionY = top;
	var myOffset = new Object();
	myOffset.left = positionX;
	myOffset.top = positionY;
	//$("#MyDiv").offset(myOffset);
	$("#MyDiv").css({position: "absolute",'top':top+30,'left':left,'z-index':2});  
	$("#MyDiv").width(500);
	$("#MyDiv").height(100);
	var div1 = $('#MyDiv').show();
}

function jqueryCloseDiv() {
	$('#MyDiv').hide();
};

$("#testButton").click(function(){
	alert("点击Button!");
});

// 弹出隐藏层
function ShowDiv(show_div, bg_div) {
	document.getElementById(show_div).style.display = 'block';
	document.getElementById(bg_div).style.display = 'block';
	var bgdiv = document.getElementById(bg_div);
	bgdiv.style.width = document.body.scrollWidth;
	// bgdiv.style.height = $(document).height();
	alert($(document).height());
	$("#" + bg_div).height($(document).height());
};
// 关闭弹出层
function CloseDiv(show_div, bg_div) {
	document.getElementById(show_div).style.display = 'none';
	document.getElementById(bg_div).style.display = 'none';
};