ASP.Net中jQuery控制div弹出框效果

一、两个div一个是边框一个用来显示内容（代码如下）：

 <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 样式如下：

   #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）：

 <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>