JS弹窗，在单页面可以，为什么在Master页面调用的时候就不可以，为什么呢，这是为什么呢，为什么呢....老天...

heixiaotu 2011-01-09 10:24:00

//设置的属性

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