Lightbox_me弹出层插件使用说明简单介绍
分类:实例代码
弹出层效果在很多网站都有应用,可以有效的提高人性化程度。
我们可以亲自操刀写这种效果,但是如果有好的插件,我们自然愿意使用。
Lightbox_me弹出层插件是一个不错的选择,下面就介绍一下它的使用方式,需要的可以做一下参考。
一.插件功能:
用来显示弹出层效果。
二.Lightbox_me官方地址:
http://buckwilson.me/lightboxme/
三.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('pipipi.net'); }); }); </script>
四.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; }