弹出层这个效果是在外贸网站制作过程中经常会用到的一个小效果，通常的效果是弹出以后要么有一个按钮点击关闭，要么是点击弹出层这外的区域自动关闭，那么哪果要这两个效果同时实现我们该怎么做呢，下面我们就来看一看通过jquery实现有关闭按钮而且点击内容区域外的任何地方都可以自动关闭的弹出层！

既然是jquery，首先当然得引用jqery库，这个就不多说了，其次我们还需要引用另外一个js——jquery.reveal.js，有需要测试的朋友可以直接在网上搜索下载，由于代码太多，在这里就不贴出来了。

弹出层的代码：

<div id=”myModal”>

div id=”myModal”>         test <a>×</a></div>

触发弹出层的代码：<span><a href=”#” data-reveal-id=”myModal” data-animation=”fade”>点击弹出层</a></span>

当然样式和内容都是可以自定义的，可根据网站的实际情况添加想要的内容和合适的样式就可以了

效果：

弹出层后面的遮罩背景可根据实际需要来调整，点击白色区域外的任何地方或者点击关闭按钮“×”，弹出层都可以关闭！

如果有更好的方法，欢迎留言交流！