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的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
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
smarty实例教程
2006/11/19 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
js实现日历的简单算法
2017/01/24 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
Python3实现定时任务的四种方式
2019/06/03 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
《匆匆》教学反思
2014/02/22 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
大专生自荐书范文
2014/06/22 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
签约仪式致辞
2015/07/30 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
python使用glob检索文件的操作
2021/05/20 Python