本来模态框时就想用bootstrap的模态框，但是这个框架里的jquery版本是1.8，这个版本的boostrap要求jquery 1.9.1+，于是就只用jquery来实现了。
<script type="text/javascript">
function PopupDiv(div_id) {
// 获取传入的DIV
var $div_obj = $("#" + div_id);
// 计算机屏幕高度
var windowWidth = $(window).width();
// 计算机屏幕长度
var windowHeight = $(window).height();
// 取得传入DIV的高度
var popupHeight = $div_obj.height();
// 取得传入DIV的长度
var popupWidth = $div_obj.width();
// // 添加并显示遮罩层
$("<div id='bg'></div>").width(windowWidth * 0.99)
.height(windowHeight * 0.99).click(function () {
//hideDiv(div_id);
}).appendTo("body").fadeIn(200);
// 显示弹出的DIV
$div_obj.css({
"position": "absloute"
}).animate({
left: windowWidth / 2 - popupWidth / 2,
top: windowHeight / 2 - popupHeight,
opacity: "show"
}, "slow");
}
//隐藏弹出DIV
function HideDiv(div_id) {
$("#bg").remove();
$("#" + div_id).animate({
left: 0,
top: 0,
opacity: "hide"
}, "slow");
}
//调用方法
function CreateAccount() {
PopupDiv("createAccount");
}
</script>
<style type="text/css">
.pop-box {
/*弹出窗口后，弹出的DIV采用此CSS，保证置于最上层
z-index控制Z轴的坐标，数值越大，离用户越近
*/
z-index: 9999999; /*这个数值要足够大，才能够显示在最上层*/
margin-bottom: 3px;
display: none;
position: absolute;
background: white;
border-radius: 11px;
border: 1px solid #6e8bde;
}
#bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
/*弹出窗口后，添加遮罩层，采用此CSS，将该层置于弹出DIV和页面层之间
z-index控制Z轴的坐标，数值越大，离用户越近 rgba(72, 74, 68, 0.46)
*/
z-index: 1001;
background-color: #8f9f8f;
-moz-opacity: 0.7;
opacity: .70;
filter: alpha(opacity = 70);
}
</style>
<div class="pop-box" id="createAccount" style="width: 300px; height: 330px;">
<div class="form-horizontal" style="margin-top: 15px;">
<div class="form-group">
<label class="control-label col-md-3">姓名</label>
<div class="col-md-8">
<asp:TextBox ID="txtPersonName" runat="server" CssClass="form-control" placeholder="请输入姓名">></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">部门</label>
<div class="col-md-8">
<asp:TextBox ID="txtDepartment" runat="server" CssClass="form-control" placeholder="请输入部门">></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">职务</label>
<div class="col-md-8">
<asp:TextBox ID="txtDuty" runat="server" CssClass="form-control" placeholder="请输入职务">></asp:TextBox>
</div>
</div>
<div class="form-group">
<asp:Button ID="btnCreate" runat="server" Text="创建" CssClass="btn btn-primar col-md-offset-4" OnClick="btnCreate_Click" />
<a href="#" onclick="HideDiv('createAccount')" class="btn btn-danger">关闭</a>
</div>
</div>
</div>
