代码
<!doctype html public "-//w3c//dtd html 4.0 strict//en">
<html>
<head>
<title>签回管理查询列表</title>
<script type="text/javascript" src="/reins/common/js/jquery-1.4.2.min.js"></script>
<script src="/reins/common/datepicker/WdatePicker.js"></script>
<meta http-equiv="Content-Type" content="text/html;">
<link href="/reins/css/Standard.css" rel="stylesheet" type="text/css">
</head>
<body>
<table class=sub>
<tr class=common>
<td>
<input type="button" class="button" value="签回" id="checkbackid" onclick="showRemarks()">
</td>
<td>
<input type=button value="返 回" onclick="returnQuery()" class="button">
</td>
</tr>
</table>
<div style="display:none" class="remarksBox" id="remarksBox">
<br>
<h4 >签回时间录入:</h4>
<table class="common" cellpadding="3" cellspacing="0">
<tr>
<td class=batitle>签回时间:
<input type="text" name="checkbackTime" id="checkbackTime" onFocus="WdatePicker({isShowClear:true})">
</td>
</tr>
</table>
<br>
<table class="common">
<tr>
<td>
<input type="button" class="commit" name="commit" style="text-align: center" value="保存"
onclick="checkBack(this)">
<input type="button" class="cancle" name="cancle" style="text-align: center" value="取消"
onclick="closePopOver()">
</td>
</tr>
</table>
</div>
<div class="mask" id="mask"></div>
</body>
<script language="JavaScript" type="text/javascript">
function showRemarks() {
document.getElementById('remarksBox').style.display = 'block';
document.getElementById('mask').style.display = 'block';
}
function closePopOver(){
document.getElementById('remarksBox').style.display = "none";
document.getElementById('mask').style.display = "none";
}
<script>
<style>
.remarksBox{
position:fixed;
left:55%;
margin-left:-300px;
top:40%;
margin-top:-50px;
border: 1px solid red;
width: 400px;
height: 200px;
display: none;
text-align: center;
z-index: 1000;
background-color: #F0F7FE;
}
.mask{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
/*兼容ie6*/
filter: alpha(opacity=50);
opacity: 0.5;
overflow: hidden;
background-color: #000;
}
</style>
</body>
</html>