jQuery 弹出层脚本

时间:2021-07-07 22:47:16

直接贴代码:

 $.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 弹出层脚本的更多相关文章

  1. JQuery弹出层,实现弹层切换,可显示可隐藏。

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  2. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  3. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  4. 基于jQuery弹出层图片动画查看代码

    分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&q ...

  5. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

  6. jQuery弹出层效果

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  7. 效果非常好的 Jquery弹出层插件 jQuery Sweet alert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...

  8. jQuery弹出层插件popbox

    都什么年代了,还自己写弹出层插件!是的,①自己写的自己好控制②可定制性高③兼容低版本IE 本插件有以下特性: 样式分离,可定制,纯净无图片 可自定义按钮及按钮的样式.点击事件 可指定选择器选择页面元素 ...

  9. jQuery弹出层始终垂直居中相对于屏幕或当前窗口

    把弹出层的位置设为fixed,设置top:50%,然后获取当前元素的整体的高度height,用获取的高度height/2,设置margin-top:-height/2.即可把当前的弹出层始终垂直居中于 ...

随机推荐

  1. 用Eclipse运行Android版APP(PhoneGap)时出现:Unable to execute dex&colon; Multiple dex files define

    这两天遇到点小问题,做个记录: 症状:运行,调试时都报:Unable to execute dex: Multiple dex files define错误,发布后的APP安装到手机后一运行,就提示: ...

  2. 通过继承Rect类编写一个具有确定位置的矩形类PlainRect,其确定位置用 矩形的左上角坐标来标识,包含: 添加两个属性:矩形左上角坐标startX和startY。 两个构造方法: 带4个参数的构造方法,用于对startX、startY、width和height属性 初始化; 不带参数的构造方法,将矩形初始化为左上角坐标、长和宽都为0 的矩形; 添加一个方法: 判断某个点是否在矩形内部的方法

    package b; public class Rect { Double width; Double height; public Double getWidth() { return width; ...

  3. Working with Data &&num;187&semi; Getting started with ASP&period;NET Core and Entity Framework Core using Visual Studio &&num;187&semi; 增、查、改、删操作

    Create, Read, Update, and Delete operations¶ 5 of 5 people found this helpful By Tom Dykstra The Con ...

  4. sql获取exec&lpar;&&num;39&semi;&&num;39&semi;&rpar;的返回值

    ) ) select @sql=('select @a=cNumber+1 from VoucherHistory where CardNumber='''+@CardNumber+'''') exe ...

  5. c&num; 刻度:毫米 英寸 像素转换

    从目前所掌握的资料来看,c#程序中将毫米转换像素的方法无非两种: 第一种: 1: /// <summary> 2: /// 以毫米为单位的显示宽度 3: /// </summary& ...

  6. 数列分段Section II

    洛谷传送门 输入时处理出最小的答案和最大的答案,然后二分答案即可. 其余细节看代码 #include <iostream> #include <cstdio> using na ...

  7. 程序员网站开发时应该注意的SEO问题

    一.链接的统一性 搜索引擎排名最主要的因素就是网站内容和链接,假如网站内部链接不一致,在很大程度上直接影响着网站在搜索引擎中的排名.例如彩票专营店导航栏中的“首页”链接,程序员在开发时可能会有以下几种 ...

  8. Spring 依赖注入中 Field 注入的有害性

    大致分为:Field 注入.构造注入.setter 注入 其中 Field 注入被认为有害的: 1. 违反了单一原则 当一个 class 中有多个依赖时,如果仅仅使用 Field 注入,则看不出有很多 ...

  9. BZOJ3673 可持久化并查集 by zky 可持久化 并查集

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ3673 题意概括 n个集合 m个操作操作:1 a b 合并a,b所在集合2 k 回到第k次操作之后的 ...

  10. linux下的环境变量配置

    方法一: 方法二: