jQuery 弹出层脚本
直接贴代码:
$.extend({
closeBox: function (o, x, fn) {
$('#' + o).fadeOut(500, function () {
if (fn && typeof (fn) === "function") { fn(); }
});
if ($('#v_overlay')[0]) { $('#v_overlay').fadeOut(650, function () { $(this).remove(); }); }
},
openBox: function (o, x, fn) {
$.init(o, x, fn); $('#' + o).fadeIn(500);
},
init: function (o, x, fn) {
var w = $(window).width(), h = $(window).height();
var bw = $("#" + o).width(), bh = $("#" + o).height();
var _top = ((h / 2 - bh / 2) - 50);
var boxCss = { "left": ((w / 2 - bw / 2) + "px"), "top": ((_top > 0 ? _top : 10) + "px"), "z-index": "999", "position": "fixed" };
$("#" + o).css(boxCss);
try {
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
$("#" + o).css("position", "absolute"); location.href = location.href.search(/\?/) > 0 ? location.href.substring(0, location.href.indexOf('#')) : location.href + "#";
}
if ((window.innerHeight - 40) <= $("#" + o).height()) {
$("#" + o).css({ "position": "absolute", "top": (40 + window.scrollY) });
}
} catch (e) { }
if (x != undefined && $("body").find("#v_overlay").html() == null) {
var boxBg = "<div id=\"v_overlay\" style=\"position:absolute;background-color:#000;filter:alpha(opacity=30);opacity:0.3;width:100%;left:0;top:0;z-index:998;border:none;display:none\"></div>";
$(boxBg).click(function () { $.closeBox(o, x); }).height($(document).height()).appendTo("body").fadeIn();
}
$(window).resize(function () {
if ($("#" + o).css("display") == "block") {
$('#v_overlay').remove(); $.init(o, x);
}
});
}
});
jQuery 弹出层脚本的更多相关文章
- JQuery弹出层,实现弹层切换,可显示可隐藏。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮【转】
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- 基于jQuery弹出层图片动画查看代码
分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&q ...
- 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件
今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...
- jQuery弹出层效果
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...
- 效果非常好的 Jquery弹出层插件 jQuery Sweet alert
介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...
- jQuery弹出层插件popbox
都什么年代了,还自己写弹出层插件!是的,①自己写的自己好控制②可定制性高③兼容低版本IE 本插件有以下特性: 样式分离,可定制,纯净无图片 可自定义按钮及按钮的样式.点击事件 可指定选择器选择页面元素 ...
- jQuery弹出层始终垂直居中相对于屏幕或当前窗口
把弹出层的位置设为fixed,设置top:50%,然后获取当前元素的整体的高度height,用获取的高度height/2,设置margin-top:-height/2.即可把当前的弹出层始终垂直居中于 ...
随机推荐
- html5 canvas画流程图
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- QT 调试时出现 During startup program exited with code 0xc0000135 错误
我用的QT creator 5.70 出现上述原因是动态库加载不成功,但是QTcreator 不会提示什么动态库,具体缺乏什么动态库要用VS新建一个工程调用才可以看到,这也是QT Creator很大的 ...
- Java提高篇——理解String 及 String.intern() 在实际中的应用
1. 首先String不属于8种基本数据类型,String是一个对象. 因为对象的默认值是null,所以String的默认值也是null:但它又是一种特殊的对象,有其它对象没有的一些特性. 2. ...
- Issue 4:分布式的基础性问题
最近打算聊一聊分布式的基本思想.定了个大致的技术路线. 分布式难点 分片和元数据管理 多副本策略 多副本一致性方案 并发和事务支持
- Linux上设置memcached自启动
#!/bin/sh # # memcached: MemCached Daemon # # chkconfig: - 90 25 # description: MemCached Daemon # # ...
- expdp ORA-31693 ORA-31617 ORA-19505 ORA-27037
使用expdp并行导出数据的时候报如下错误: Connected to: Oracle Database 11g Enterprise Edition Release 11.2.0.4.0 - 64b ...
- MWeb 1.7.1 版发布!支持导出为 RTF 和 Docx、发布到 Evernote 带样式、文档库备份和新网站主题等大量改进!
编辑器及发布服务改进 增加设置图片宽度和居左.居右.居中的语法. 如: 这样表示设置图片宽度为 450.其中 -w450 为设置语法,生成 HTML 时会自动 ...
- FreeBSD 查看硬件信息
systat 能实时查看各种信息 systat -pigs 默认值CPU systat -iostat 硬盘IO systat -swap 交换分区 systat -mbufs 网络缓冲区 systa ...
- JSONObject put,accumulate,element的区别
public Object put (Object key, Object value) 将value映射到key下.如果此JSONObject对象之前存在一个value在这个key下,当前的valu ...
- C# WinForm开发系列 - DataGridView
1.DataGridView实现课程表 testcontrol.rar 2.DataGridView二维表头及单元格合并 DataGridView单元格合并和二维表头.rar myMultiColHe ...