最近用到彈出層，還得自定義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，大家需要的話自行下載或者聯系我直接發給你，本人比較懶，沒有隨手做壓縮包的習慣，各位輕噴。