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.即可把当前的弹出层始终垂直居中于 ...
随机推荐
- Android界面组件的四种启动方式
Android界面组件启动有四种方式 standard,singleTop,singleTask,singleInstance. standard:每次调用都会都会产生新的组件. singletop: ...
- 移动BI来袭我们要做哪些准备?
(了解更多商业智能行业资讯.商业智能BI解决方案.商业智能客户案例,请访问:http://www.powerbi.com.cn/service) 随着智能手机的发展,商业智能(BI)基础架构也扩展到移 ...
- Windows Server 2008 R2 组策略基本设置
域控组策略基本设置 标注: 组策略计算配置:系统需要重启才生效 组策略用户配置:系统注销即可生效 一. 域用户登录桌面后自动 ...
- 《机电传动控制》PLC仿真
1.红绿灯 经仿真,可以完成所设定的要求.对比普通的红绿灯,知识加了X25和X20的控制,来控制夜间模式 . 2.传送带 经仿真,可以完成所设定的要求. 总结:这两个仿真都是亲自完成,感觉难度有些大. ...
- 深入理解javascript原型和闭包(1)---一切都是对象
深入理解javascript原型和闭包(1)---一切都是对象 type函数输出的类型,在此列出: function show (x){ console.log(typeof(x));//undefi ...
- hadoop实战 -- 网站日志KPI指标分析
本项目分析apache服务器产生的日志,分析pv.独立ip数和跳出率等指标.其实这些指标在第三方系统中都可以检测到,在生产环境中通常用来分析用户交易等核心数据,此处只是用于演示说明日志数据的分析流程. ...
- IIS无法加载字体文件(*.woff,*.svg)的解决办法
在编写前端代码的过程中经常会遇到使用特定的字体(*.woff,*.svg),此时在加载字体时请求会被返回 Failed to load resource: the server responded w ...
- Thinkstation center M8600t装RHEL7不能联网,网卡驱动没装问题
Thinkstation center M8600t装RHEL7时不能联网,配置ip也不可以,后来发现网卡驱动没有安装.可以通过装网卡驱动的方式解决问题,解决方法如下: root登录 lspci | ...
- C/C++ 结构体 指针 函数传递
#include <stdio.h> #include <stdlib.h> struct student{ int num; ]; double dec; }; void s ...
- [转]彻底征服 Spring AOP 之 理论篇
基本知识 其实, 接触了这么久的 AOP, 我感觉, AOP 给人难以理解的一个关键点是它的概念比较多, 而且坑爹的是, 这些概念经过了中文翻译后, 变得面目全非, 相同的一个术语, 在不同的翻译下, ...