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入门第一课 jQuery选择符
Mar 14 Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
如何对python的字典进行排序
2020/06/19 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
日语翻译个人求职的自我评价
2013/10/14 职场文书
人力资源专员岗位职责
2014/01/30 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
端午节寄语2015
2015/03/23 职场文书
小学美术教学反思
2016/02/17 职场文书
Redis可视化客户端小结
2021/06/10 Redis
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers