//设置的属性
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#CCC;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:480px;
  height:400px;
  display:none;
  z-index:9999;
  padding:20px;
}#boxes #dialog {
  width:480px; 
  height:400px;
  padding:10px;
  background-color:#ffffff;
}
.boxtitle{
height:25px;text-align:right;
}//DIV
  <script type="text/javascript" src="../js/jquery.js"></script>
                <script>
                    $(document).ready(function() {
                        //select all the a tag with name equal to modal
                        $('a[name=modal]').click(function(e) {
                            //Cancel the link behavior
                            e.preventDefault();
                            //Get the A tag
                            var id = $(this).attr('href');
                            //Get the screen height and width
                            var maskHeight = $(document).height();
                            var maskWidth = $(window).width();
                            //Set heigth and width to mask to fill up the whole screen
                            $('#mask').css({ 'width': maskWidth, 'height': maskHeight });
                            //transition effect        
                            $('#mask').fadeIn(1000);
                            $('#mask').fadeTo("slow", 0.8);
                            //Get the window height and width
                            var winH = $(window).height();
                            var winW = $(window).width();
                            //Set the popup window to center
                            $(id).css('top', winH / 2 - $(id).height() / 2);
                            $(id).css('left', winW / 2 - $(id).width() / 2);                            //transition effect
                            $(id).fadeIn(2000);
                        });                        //if close button is clicked
                        $('.window .close').click(function(e) {
                            //Cancel the link behavior
                            e.preventDefault();
                            $('#mask').hide();
                            $('.window').hide();
                        });
                        //if mask is clicked
                        $('#mask').click(function() {
                            $(this).hide();
                            $('.window').hide();
                        });                    });                </script> <%--弹出添加话框--%>                <div id="boxes">
                <div id="dialog" class="window">
                <div class="boxtitle">
                <a href="#"class="close"/>关闭</a>
                </div>
                <div class="boxcontent">                <td align="right" valign="top" style="width:450px">
                        <div style="text-align: right">
                            <table align="right" border="0" cellpadding="0" cellspacing="0" class="td3" style="width: 450px; direction: ltr; text-indent: 2pt;">
                                <tr>
                                    <td align="left" class="style2" style="height: 35px; width: 450px;" valign="middle">
                                        添加慈善排行<a href="gwfb.aspx"></a></td>
                                </tr>
                                <tr>
                                    <td align="left" valign="middle" style="height: 35px; width: 450px;" class="style4">
                                        姓名:<asp:TextBox ID="TextBox1" runat="server" Height="12px" Width="200px"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td align="left" class="style4" style="width: 450px; height: 35px" valign="middle">
                                        称谓:<asp:TextBox ID="TextBox5" runat="server" Height="12px" Width="200px"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td align="left" class="style4" style="width: 450px; height: 35px" valign="middle">
                                        来源:<asp:TextBox ID="TextBox6" runat="server" Height="12px" Width="200px"></asp:TextBox></td>
                                </tr>
                                <tr>                                </tr>
                                   <tr>
                                    <td align="left" class="style4" style="width: 450px; height: 35px" valign="middle">
                                        地区:<asp:TextBox ID="TextBox7" runat="server" Height="12px" Width="100px"></asp:TextBox>
                                    </td>
                                </tr>
                                 <tr>
                                    <td align="left" class="style4" style="width: 450px; height: 35px" valign="middle">
                                        年度:<asp:TextBox ID="TextBox8" runat="server" Height="12px" Width="100px"></asp:TextBox>
                                    </td>
                                </tr>
                                 <tr>
                                    <td align="left" class="style4" style="width: 450px; height: 35px" valign="middle">
                                        排序:<asp:TextBox ID="TextBox9" runat="server" Height="12px" Width="50px"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center" valign="middle" style="height: 35px; width: 450px;" class="style4">
                                        <a href="#"><img src="../admin/images/fbxx1.gif" /></a></td>
                                </tr>
                            </table>
                        </div>
                    </td>
                
                </div>
                </div> 
                <!-- Mask to cover the whole screen -->
                  <div id="mask"></div>
                </div>