标签：
最近用到弹出层，还得自定义UI，原本用的artDialog太庞大，不合适了，于是就找到了这个东西，又小又好用，基础的弹出遮罩都有了，想要什么还不是Coder自己说了算。
这个插件是基于Jquery实现的，非常小，插件本身只有3K多一点，用起来也算简单明了。
废话不说了。上Demo
首先是引用部分：
Html->head：
<head> <meta charset="utf-8" /> <title>Reveal Demo</title> <link rel="stylesheet" href="reveal.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> <script type="text/javascript" src="jquery.reveal.js"></script> <style type="text/css"> body { font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif; } .big-link { display:block; margin-top: 100px; text-align: center; font-size: 70px; color: #06f; } </style> </head>
头部所有引用除了jquery都是插件用到的东西，一个css文件，一个js文件，js文件就是插件本体，css是一个预设好的样式，用起来很方便，如果需要可以自行修改。下面的style标签里写的是我自己用到的基本样式，无他。
Html->body：
<a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade"> Fade </a> <div id="myModal" class="reveal-modal"> <h1>test</h1> <a class="close-reveal-modal">×</a> </div>
这个a标签是用来显示弹出层的，div就是要弹出的层，层里面需要什么东西，长成什么样子就看个人的需求了。
其中：
1.a标签中的data-reveal-id属性的值必须要与需要弹出的层的id对应，这里只能使用id，使用其他定位符就不好用了。
2.a标签中的data-animation属性设置的是弹出方式，有三种属性可以选，fade, fadeAndPop, none，分别对应不同的动画效果，当然最后一个实参none就是没有动画效果了，一般推荐使用fade，其他的各位可以尝试下，大同小异，看个人喜好，经过与UED人员讨论，结果是三种方式对于用户体验的影响不大，这里就仁者见仁智者见智了。
3、div标签中的id属性必须要设置，并与a标签中的data-reveal-id属性对应，这是一个基于Jquery的选择器方式，这里不再赘述这个问题了，不明白选择器的可以自行百度w3c School里去学习。
4.<a class="close-reveal-modal">×</a>这一行代码是预设好的样式，在弹出层右上角会有一个关闭按钮，并已经写好了关闭弹出层的关闭事件，相信一般大家都是需要的吧，当然也可以自定义。
JS插件本体没什么好说的，实际上就是基于Jquery的一系列操作和方法，方式还是拼装html这种很原始的方式，所以兼容性方面不用考虑很多。这里只把经常需要设置的东西列出来。
var defaults = { animation: ‘fade‘, //可选模式为三种：fade, fadeAndPop, none animationspeed: 300, //动画效果速度 closeonbackgroundclick: true, //设置点击模态化背景时是否关闭弹出层 dismissmodalclass: ‘close-reveal-modal‘ //设置关闭关闭的样式 };
代码注释都在，不需要解释了。
其他的东西常规情况下都不需要变动，根据个人情况而定吧。这个插件使用非常简单，想来想去都没必要再弄个演示啥的，如果哪位朋友真需要的话直接联系我给你发吧。
插件本身有很强的自定义性，样式，表现方式都可以自己定义，小弟因为css功力实在是见不得人，这里就不献丑了，各位自己做样式吧。
插件的js和css文件在我的空间里都有，名称分别为：jquery.reveal.js和reveal.css，大家需要的话自行下载或者联系我直接发给你，本人比较懒，没有随手做压缩包的习惯，各位轻喷。
标签：
原文地址：http://www.cnblogs.com/tb007/p/4786774.html
