一、两个div一个是边框一个用来显示内容(代码如下):
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<div id="BgDiv"></div>
<div id="DialogDiv" style="display: none; height: 250px">
<h2>填写流程信息<a href="#" id="btnClose">关闭</a></h2>
<table style="width: 100%">
<tr>
<td style="text-align: right; width: 120px">流程模板:
</td>
<td>
<asp:DropDownList ID="ddlModel" runat="server" Width="270px">
<asp:ListItem>
施工配合管理流程
</asp:ListItem>
<asp:ListItem>紧急重点会议工作布置、落实流程</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td style="text-align: right">流程名称:
</td>
<td>
<asp:TextBox ID="txtWorkflowName" runat="server" Text="广铁项目"></asp:TextBox>
</td>
</tr>
<tr>
<td style="text-align: right">发起部门:</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>安全科</asp:ListItem>
<asp:ListItem>教育科</asp:ListItem>
<asp:ListItem>技术科</asp:ListItem>
<asp:ListItem>高铁技术科</asp:ListItem>
<asp:ListItem>调度值班室</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td style="text-align: right">流程结束时间:
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Text="2014-07-30"></asp:TextBox>
</td>
</tr>
<tr style="margin-top: 20px; height: 60px">
<td colspan="2">
<table style="width: 100%">
<tr>
<td style="text-align: right;">
<asp:Button ID="sporn_workflow" OnClick="btnSponsorWorkflow1_Click" Width="70px" runat="server" Height="30px" Text="发起" />
</td>
<td style="width: 20px"></td>
<td style="text-align: left">
<asp:Button ID="btnCancel" Width="70px" Height="30px" runat="server" Text="取消" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
1.说明:BgDiv用来防止在弹出框时后面的控件还可用
1.1 样式如下:
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
#BgDiv {
background-color: #e3e3e3;
position: absolute;
z-index: 99;
left: 0;
top: 0;
display: none;
width: 100%;
height: 1000px;
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}
#DialogDiv {
position: absolute;
width: 450px;
left: 50%;
top: 50%;
margin-left: -200px;
height: auto;
z-index: 100;
background-color: #fff;
border: 1px #8FA4F5 solid;
padding: 1px;
}
#DialogDiv h2 {
height: 25px;
font-size: 14px;
background-color: #BADCF7;
position: relative;
padding-left: 10px;
line-height: 25px;
}
#DialogDiv h2 a {
position: absolute;
right: 5px;
font-size: 12px;
color: #000000;
}
#DialogDiv .form {
padding: 10px;
}
1.2js如下(btnShow为触发这个弹出框的元素ID):
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<script src="javascript/jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#btnShow").click(function () {
var str = "<input type='text' id='txtinput' />";
$(".form").html(str);//这个是动态创建
$("#BgDiv").css({ display: "block", height: $(document).height() });
var yscroll = document.documentElement.scrollTop;
$("#DialogDiv").css("top", "200px");
$("#DialogDiv").css("display", "block");
document.documentElement.scrollTop = 0;
});
$("#btnClose").click(function () {
$("#BgDiv").css("display", "none");
$("#DialogDiv").css("display", "none");
$("#txtshow").val($("#txtinput").val())
});
$("#btnCancel").click(function () {
$("#BgDiv").css("display", "none");
$("#DialogDiv").css("display", "none");
$("#txtshow").val($("#txtinput").val())
});
});
</script>