一、两个div一个是边框一个用来显示内容(代码如下):
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.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/ContractedBlock.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/ContractedBlock.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>