在一个外贸商城网站制作过程中，客户要求产品详细面一个和产品尺寸相关的FAQ能够点击显示，在网上看了一下，实现这个效果有很多方法，有全部JS的，也有通过jQuery来实现的，但是由于现在的浏览器众多，兼容性就成了问题，下面就介绍一个通过jQuery来实现的能够兼容多浏览器的方法：

首先我们需要在相关页面中引用两个js，jquery-1.4.2.min.js 和 jquery.fancybox-1.3.1.js (这两个js可以在网上下载，这里就不再粘贴了)，再就是调用了
$(document).ready(function() {
$(“#various1″).fancybox({
‘titlePosition’ : ‘inside’,
‘transitionIn’ : ‘none’,
‘transitionOut’ : ‘none’
});
});

注意：以上#后面的名称一定要和网页中所用到的相关标签一致，否则就会出错。
同进也不要忘了引用相关的CSS

在这里调用

效果如图：

图中白色部分即为弹出层，鼠标单击白色区域以外部分，弹出层会自动隐藏！