jQuery弹出层插件Lightbox_me使用指南


Posted in Javascript onApril 21, 2015

网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆、注册、设置等窗口。而这些窗口就是层,弹出的窗口就是弹出层。jQuery中弹出层插件很多,但有些在html5+css3浏览器下,支持完美。而在例如ie8一下的浏览器下显示不出应有的效果。例如jquery.avgrund插件在ie8下就无法显示。

本文介绍的插件Lightbox_me可以完美的支持chrome,firefox和ie7,ie8,ie9等主流浏览器。

1.Lightbox_me插件功能

用于显示弹出层

2.Lightbox_me官方地址

http://buckwilson.me/lightboxme/
在网页的下面有演示地址和常用属性。

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;
}

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
jQuery提示插件alertify使用指南
Apr 21 #Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 #Javascript
Jquery遍历Json数据的方法
Apr 20 #Javascript
javascript判断变量是否有值的方法
Apr 20 #Javascript
javascript实现校验文件上传控件实例
Apr 20 #Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 #Javascript
javascript实现汉字转拼音代码分享
Apr 20 #Javascript
You might like
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
js简易版购物车功能
2017/06/17 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
Python中的魔法方法深入理解
2014/07/09 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
Python解析json文件相关知识学习
2016/03/01 Python
Python入门必须知道的11个知识点
2018/03/21 Python
python实现最长公共子序列
2018/05/22 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
python3.6编写的单元测试示例
2019/08/17 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
python实现经典排序算法的示例代码
2021/02/07 Python
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
蜜蜂引路教学反思
2014/02/04 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
秋季运动会加油词
2015/07/18 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书