接上篇，繼續jQuery Tools的講解。本篇講解jQuery Tools中十分有用的一個組件——遮罩效果（overlay）。遮罩效果的實現包含兩個部分：觸發遮罩效果的元素（觸發器），及事件觸發后，頁面上方彈出的遮罩層元素。

　　下面看一個最簡單的例子（點擊關閉按鈕或觸發按鈕或esc鍵，關閉overlay）：

　　HTML Code:

<!-- 定義一個按鈕作為觸發器. 這里通過rel屬性，指定遮罩層元素的id --> 
<button type="button" rel="#overlay">Open overlay</button>
 
<!-- 遮罩元素，你可以通過樣式表定義樣式 --> 
<!-- 遮罩元素可以使任何html元素，一般我們用div，注意id的設定 --> 
<div class="overlay" id="overlay"> 
    <!--這里是遮罩層里面要放的東西 --> 
    <h2 style="margin:10px 0">Here is my overlay</h2>  
    <p style="float: left; margin:0px 20px 0 0;"> 
        <img src="http://static.flowplayer.org/img/title/eye192.png" /> 
    </p>  
    <p> 
         Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
         per inceptos himenaeos. Donec lorem ligula, elementum vitae, 
         imperdiet a, posuere nec, ante. Quisque mattis massa id metus. 
    </p> 
</div>

it知識庫：jQuery Tools——不可錯過的jQuery UI庫（四），轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。