jquery - 为什么 mask 在 jquery 的 Overlay Plugin 中不起作用

Question

<script type="text/javascript" src="../jquery-qtip-1.0.0-rc3094652/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../jquery.tablesorter/jquery.tablesorter.js"></script>
<script type="text/javascript" src="../jquery-qtip-1.0.0-rc3094652/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript" src="jquery.tools.min(4).js"></script>

<script type="text/javascript">

$(document).ready(function(){
 $(function() {

    // if the function argument is given to overlay,
    // it is assumed to be the onBeforeLoad event listener
    $(".tool-table a[rel]").overlay({

        mask: 'darkred',
        effect: 'apple',

        onBeforeLoad: function() {

            // grab wrapper element inside content
            var wrap = this.getOverlay().find(".contentWrap");

            // load the page specified in the trigger
            wrap.load(this.getTrigger().attr("href"));
        }

    });
}); 

});

</script>

<style>

/* use a semi-transparent image for the overlay */
    #overlay {
        background-image:url(http://static.flowplayer.org/img/overlay/transparent.png);
        color:#efefef;
        height:450px;
    }

    /* container for external content. uses vertical scrollbar, if needed */
    div.contentWrap {
        height:441px;
        overflow-y:auto;
    }

</style>

<div id="table-of-data-div"> 
        <div id="table-div">
                <table id="box-table-a" class="tablesorter">
                                    <thead>
                                        <tr>
                                        <th scope="col" style="cursor:pointer;">B-House/Dorm Name</th>
                                        <th scope="col" style="cursor:pointer;">Address</th>
                                        <th scope="col" style="cursor:pointer;">Price Range</th>
                                        <th scope="col" style="cursor:pointer;">Date Added</th>
                                        <th scope="col" style="cursor:pointer;">Status</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                   <?php



                                   $q=mysql_query("select * from property");
                                        while( $f=mysql_fetch_array($q, MYSQL_ASSOC))
                                        {
                                        $p_id=$f["p_id"];

                                   echo"

                                        <tr>
                                            <td class='tool-table'>
                                            <span class='tool-id' style='display:none'>".$p_id."</span>
                                            <span id='testid' style='cursor:pointer'><a id='wala' href='profile-test.php?q=$p_id' rel='#overlay' style='text-decoration:none; color:#339;'>".$f['p_name']."</a></span></td>
                                            <td id='pretty'>".$f['address']."</td>
                                            <td>".$f['p_name']."</td>
                                            <td>".$f['payment_type']."</td>      
                                            <td>".$status."</td>       
                                        </tr>       


                                    ";

                                    }



                                    ?>
                                        </tbody>

                </table>
                <div class="apple_overlay" id="overlay">

                <!-- the external content of overlay is loaded inside this tag -->
                <div class="contentWrap"></div>

                </div>


        </div>

    </div>

我有截图

Answer 1

确保您的 jquery 工具 javascript 包含公开。该库用于显示 mask 。