jQuery弹出层插件Lightbox.doc

　　在使用discuzx中有一个Message以及Dialog方法来显示信息对话框。今天写项目的时候，需要一个信息对话框，所以就着手利用lightbox_me插件来写一个做备用。
　　网站开发过程中，为了增加网站交互效果，我们有时需要在当前页面弹出诸如登陆、注册、设置等窗口。而这些窗口就是层，弹出的窗口就是弹出层。jQuery中弹出层插件很多，但有些在html5+css3浏览器下，支持完美。而在例如ie8一下的浏览器下显示不出应有的效果。例如jquery.avgrund插件在ie8下就无法显示。
　　本文介绍的插件Lightbox_me可以完美的支持chrome,firefox和ie7,ie8,ie9等主流浏览器。
　　1.Lightbox_me插件功能
　　用于显示弹出层
　　2.Lightbox_me官方地址
　　在网页的下面有演示地址和常用属性。
　　3.Lightbox_me使用方法
　　1.首先引用jquery.js与jquery.lightbox_me.js
　　<script src="/ref/jquery-1.7.2.min.js"></script>
　　<script src="/ref/lightbox_me/jquery.lightbox_me.js"></script>
　　2.使用的代码
　　<script type="text/javascript">
　　$(function() {
　　$('#login').click(function(e) {
　　$('#loginbox').lightbox_me({
　　centered: true,
　　onLoad: function() {
　　$('#loginbox').find('input:first').focus()
　　}
　　});
　　e.preventDefault();
　　});
　　$('#cancel').click(function(){
　　$('#loginbox').trigger('close');
　　//alert('aaa');
　　});
　　});
　　</script>
　　4.Lightbox_me修改样式
　　弹出层的样式修改非常简单，只需要会使用css就可以了。例如一下代码：
　　#loginbox{
　　width:400px;
　　display:none;
　　background:white;
　　border:1px solid #ccc;
　　}
　　body {
　　font-size:12px;
　　font-family:微软雅黑;
　　}
　　.loginbox-title {
　　background: #eef2f7;
　　border-bottom: 1px solid #ccc;
　　margin-bottom:10px;
　　padding:8px 0;
　　font-size:14px;
　　text-align:center;
　　}
　　.loginbox-footer{
　　padding:8px 0;
　　border-top:1px solid #ccc;
　　text-align:center;
　　background:#eef2f7;
　　}
　　table {
　　width:98%;
　　margin:0 8px;
　　}
　　th, td {
　　padding:8px 0;
　　}
　　th {
　　text-align:left;
　　}
　　.big {
　　padding:5px 18px;
　　}
　　以上所述就是本文的全部内容了，希望大家能够喜欢。
　　更多信息请查看IT技术专栏