网站开发常用jQuery插件总结(二)弹出层插件Lightbox_me
网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆、注册、设置等窗口。而这些窗口就是层,弹出的窗口就是弹出层。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="http://1100w.com/ref/jquery-1.7.2.min.js"></script>
<script src="http://1100w.com/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;
}
显示结果:
演示地址:http://www.1100w.com/wp-content/uploads/2013/09/index-2.html
网站开发常用jQuery插件总结(二)弹出层插件Lightbox_me的更多相关文章
- jQuery制作信息提示弹出层插件【推荐】
给大家分享一款非常实用的弹窗提示窗口插件,包含多种模式.带有回执函数值的功能.1. [代码][JavaScript]代码 <script type="text/javascript& ...
- 网站开发常用jQuery插件总结(二)弹出层插件Lightbox
网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...
- jQuery弹出层插件popbox
都什么年代了,还自己写弹出层插件!是的,①自己写的自己好控制②可定制性高③兼容低版本IE 本插件有以下特性: 样式分离,可定制,纯净无图片 可自定义按钮及按钮的样式.点击事件 可指定选择器选择页面元素 ...
- 效果非常好的 Jquery弹出层插件 jQuery Sweet alert
介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...
- Jquery学习之路(三) 实现弹出层插件
弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 不想看可以在这里直接下载源码xsPop.zip 1:遮罩层 ...
- 写了一个jquery的 弹出层插件。
下载地址:http://pan.baidu.com/s/1eQ26CMm ps:ajax加载做的,要有环境才能正常运行哦! //这是一个以ajax加载显示弹出层插件 参数(option): widt ...
- jQuery WIN 7透明弹出层效果
jQuery WIN 7透明弹出层效果,点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度,很不错的一个弹出层插件. 适用浏览器:IE8.360.FireFox.Chrome.Sa ...
- 在Vue中使用layer.js弹出层插件
layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...
- jQuery、layer实现弹出层的打开、关闭功能实例详解
本文主要介绍了jQuery.layer实现弹出层的打开.关闭功能,需要的朋友可以参考下,希望能帮助到大家. 打开弹出层: 在list页面带入layer.js 在list页面点击时,弹出form弹出层, ...
随机推荐
- Using Live555 to Stream Live Video from an IP camera connected to an H264 encoder
http://stackoverflow.com/questions/27279161/using-live555-to-stream-live-video-from-an-ip-camera-con ...
- windows下mysql 控制台操作
windows mysql 控制台操作 1.首先打开cmd进入dos窗口 2.切换至目录: F: cd PHPnow-1.5.6\MySQL-5.0.90\bin 3.进入mysql: mysql - ...
- 了解mongodb
本文大纲 基础了解mongodb(mongodb介绍,跟其他nosql区别,跟内存服务器区别等,使用场景) 在使用前,强力建议看哈http://wenku.baidu.com /link?url=lu ...
- Power of Cryptography
//只用一行核心代码就可以过的天坑题目............= = 题目: Description Current work in cryptography involves (among othe ...
- Yii2 自动更新时间created_at updated_at
创建model之后,新建一条记录,结果设计的表中created_at 字段 updated_at 字段 都是datetime 类型的,却不能自动插入当前时间.查看了资料,解决如下: 1.在class ...
- 关于ABAP事件的一张图
事件: 这里有几组事件关键字 ,这些事件关键字在特定环境下控制ABAP/4 程序流. 逻辑数据库 是典型报表程序的外部流控制的中心点.如果将逻辑数据库链接到报表 程序,将导致显示选择 屏幕,并决定系统 ...
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
- JVM经常使用的调优參数
-Xms512m -Xmx1024m -XX:MaxPermSize=1204m -XX:+UseConcMarkSweepGC -XX:+CMSClassUnloadingEnabled -XX:+ ...
- UVa 872 - Ordering 输出全拓扑排序
本题要求输出所有拓扑排序的序列. 还好本题的数据量不是非常大.限制在26个大写英文字母,故此能够使用递归法输出. 这个递归输出所有解在Leetcode非常多这种题目的,不小心的话,还是非常难调试的. ...
- dig命令 安装
获取容器 dns 信息 需要安装dig 命令 yum install bind-utils