接上篇，继续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库（四），转载需保留来源！

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。