文档章节

jquery遮罩层插件

开源中国总架构师
 开源中国总架构师
发布于 2015/02/01 01:37
字数 110
阅读 68
收藏 0
(function($){
$.fn.showOverlay = function(options){
    /*默认配置*/
    var defaults = {'switchModel':'click','opacity':'0.5','backgroundColor':'grey'};
    var _THIS = $(this);
    var opts = $.extend({},defaults, options);
    var overlay = document.createElement('div');
    $(overlay).attr('id','x-overlay-body');
    var overlayStyle = {
        'width':'100%',
        'height':'100%',
        'opacity':opts.opacity,
        'background-color':opts.backgroundColor,
        'position':'absolute',
        'overflow':'hidden',
        'z-index':1000,
        'top':'0px',
        'left':'0px'
    };
    
    $(overlay).css(overlayStyle);
    document.body.appendChild(overlay);
    _THIS.css('z-index','1001');
    $(overlay).show();
}
$.fn.unbindOverlay = function(){
    if($('#x-overlay-body')) $('#x-overlay-body').remove();
}
})(jQuery)
/*支持传入参数:$(obj).showOverlay({'switchModel':'click','opacity':'0.5','backgroundColor':'grey'})*/

调用方式:$(obj).showOverlay(),$(obj).unbindOverlay()

需要事先引入jquery

© 著作权归作者所有

开源中国总架构师
粉丝 4
博文 5
码字总数 367
作品 0
昌平
高级程序员
私信 提问
鼠标移入移出效果 -- jQuery/Vue版

元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接 实现思路 1、根据鼠标的位置定位在元素内出现的方向 2、...

bestvist
2018/06/22
0
0
jQuery实现带遮罩层的消息框滑入滑出效果

首先,使用一个遮罩层来遮住整个页面,在遮罩层上显示一个消息框,消息框还可以被关闭,最后使用jQuery使得消息框从页面顶部滑下,实现的效果如下: 遮罩层的样式如下: 样式说明了不论在哪种...

罗盛力
2012/02/17
0
1
easyui为tab添加遮罩层

项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程。tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造...

文文1
2015/08/03
0
0
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
0
0
jQuery Fancybox插件使用参数详解

今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的。 Fancybox的项目主页地址:http://fancybox.net/ Fancybox的特点...

欣儿
2014/04/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

全面剖析 Knative Eventing 0.6 版本新特性

前言 Knative Eventing 0.6 版本已经于5月15号正式发布。相比于0.5版本,此次发布包含了一些重要特性及更新。针对这些新特性以及更新,我们如何快速、精准的定位主要技术点。本篇文章针对这些...

阿里云官方博客
11分钟前
1
0
在闲鱼,我们如何用Dart做高效后端开发?

背景 像阿里其他技术团队以及业界的做法一样,闲鱼的大多数后端应用都是全部使用java来实现的。java易用、丰富的库、结构容易设计的特性决定了它是进行业务开发的最好语言之一。后端应用中数...

阿里云云栖社区
13分钟前
6
1
初学Docker容器网络不得不看的学习笔记

【技术沙龙002期】数据中台:宜信敏捷数据中台建设实践|宜信技术沙龙 将于5月23日晚8点线上直播,点击报名 一、关于Docker Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0...

宜信技术学院
15分钟前
3
0
Django框架配置

今天我们学习Django框架配置,首先先来看一下如何在Django中创建APP! 1.Django中创建APP 首先我们打开PyCharm,找到之前你创建的Django项目,我的项目是First_Project: (1)先选中你要运行...

彩色泡泡糖
17分钟前
1
0
git代码迁移

一、从阿里云code迁移到gitLab 1、在gitLab上新建一个项目Bicon,添加私钥 2、从原地址克隆一份裸版本库 git clone --bare git://xxxx_Bicon.git 这里的地址是阿里云code的地址 3、以镜像推送...

星爵22
18分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部