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 相关文章推荐
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 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查看当前Session的ID实例
2015/03/16 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
php微信开发自定义菜单
2016/08/27 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
python实现用户管理系统
2018/01/10 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
Python如何实现线程间通信
2020/07/30 Python
Python configparser模块应用过程解析
2020/08/14 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
教师评语大全
2014/04/28 职场文书
球队口号
2014/06/18 职场文书
考试没考好检讨书
2015/05/06 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python