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.即可把当前的弹出层始终垂直居中于 ...
随机推荐
- CodeForces 676D代码 哪里有问题呢?
题目: http://codeforces.com/problemset/problem/676/D code: #include <stdio.h> #define MAXN 1001 ...
- 视觉机器学习笔记------CNN学习
卷积神经网络是第一个被成功训练的多层神经网络结构,具有较强的容错.自学习及并行处理能力. 一.基本原理 1.CNN算法思想 卷积神经网络可以看作为前馈网络的特例,主要在网络结构上对前馈网络进行简化和改 ...
- iOS程序中的内存分配 栈区堆区全局区
在计算机系统中,运行的应用程序的数据都是保存在内存中的,不同类型的数据,保存的内存区域不同.一.内存分区 栈区(stack) 由编译器自动分配并释放,存放函数的参数值,局部变量等.栈是系统数据结构,对 ...
- 转:linux下jar命令与jar包
原文链接:http://blog.chinaunix.net/uid-692788-id-2681136.htmlJAR包是Java中所特有一种压缩文档,其实大家就可以把它理解为.zip包.当然也是有 ...
- Python —条件语句
条件语句 Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了解条件语句的执行过程: Python程序语言指定任何非0和非空(null ...
- android adb命令
adb查看logcat adb logcat <TAG>:* *:S 查看指定TAG的Log adb查看最上层activity:linux: adb shell dumpsys activ ...
- csuoj 1116: Kingdoms
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1116 1116: Kingdoms Time Limit: 3 Sec Memory Limit ...
- 屌丝程序员的梦想 (六) 我也写个开源CMS
离开上家公司之后,我没急着找下家公司,一直以来都是为公司做各个细小的功能却没有属于自己的完整的项目 思来想去,我准备用自己熟悉的thinkphp 和 extjs写一个开源的cms,从用户系统,文章系统 ...
- 「JavaScript」四种跨域方式详解
超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript 的同源策略,并且了解使用跨域跨域的理由. 1. JSONP 首先要介绍的跨域方法必然是 JSON ...
- Struts2下载文件点取消出现的异常解决
struts2点击下载,如果正常下载不会报错,可是如果点击取消就会报如下的错误: Java.lang.IllegalStateException: Cannot call sendError() af ...