jquery遮罩层

    (function () {
            //遮罩层实现 zhe zhao ceng kexb 2016.2.24
            $.extend($.fn, {
                mask: function (msg, maskDivClass) {
                    this.unmask();
                    // 参数
                    var op = {
                        opacity: 0.8,
                        z: 10000,
                        bgcolor: ‘#ccc‘
                    };
                    var original = $(document.body);
                    var position = { top: 0, left: 0 };
                    if (this[0] && this[0] !== window.document) {
                        original = this;
                        position = original.position();
                    }
                    // 创建一个 Mask 层,追加到对象中
                    var maskDiv = $(‘<div class="maskdivgen">&nbsp;</div>‘);
                    maskDiv.appendTo(original);
                    var maskWidth = original.outerWidth();
                    if (!maskWidth) {
                        maskWidth = original.width();
                    }
                    var maskHeight = original.outerHeight();
                    if (!maskHeight) {
                        maskHeight = original.height();
                    }
                    maskDiv.css({
                        position: ‘absolute‘,
                        top: position.top,
                        left: position.left,
                        ‘z-index‘: op.z,
                        width: "100%",//maskWidth,
                        height:"30%", //maskHeight,
                        ‘background-color‘: op.bgcolor,
                        opacity: 0
                    });
                    if (maskDivClass) {
                        maskDiv.addClass(maskDivClass);
                    }
                    if (msg) {
                        var msgDiv = $(‘<div style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca"><div style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px">‘ + msg + ‘</div></div>‘);
                        msgDiv.appendTo(maskDiv);
                        var widthspace = (maskDiv.width() - msgDiv.width());
                        var heightspace = (maskDiv.height() - msgDiv.height());
                        msgDiv.css({
                            cursor: ‘wait‘,
                            top: (heightspace / 2 - 2),
                            left: (widthspace / 2 - 2)
                        });
                    }
                    maskDiv.fadeIn(‘fast‘, function () {
                        // 淡入淡出效果
                        $(this).fadeTo(‘slow‘, op.opacity);
                    })
                    return maskDiv;
                },
                unmask: function () {
                    var original = $(document.body);
                    if (this[0] && this[0] !== window.document) {
                        original = $(this[0]);
                    }
                    original.find("> div.maskdivgen").fadeOut(‘slow‘, 0, function () {
                        $(this).remove();
                    });
                }
            });
        })();
时间: 2024-10-10 02:22:35

jquery遮罩层的相关文章

jQuery遮罩层插件

在网页上经常遇到需要等待很久的操作,比如导出报表等.为了预防用户点击其他操作或者多次点击同个功能,需要用遮罩层把页面或者操作区盖住,防止用户进行下一步操作,同时可以提高界面友好度,让用户知道操作正在执行. $.fn.extend({ /** * 给元素添加遮罩层 * @param message {String} [可选]遮罩层显示内容 */ mask: function (message) { var $target = this, fixed = false, targetStatic =

jquery 遮罩层显示img

如果点击iframe中的image显示整个页面的遮罩层,可参考如下: http://blog.csdn.net/shiaijuan1/article/details/70160714 具体思路就是,顶层添加dom对象,用来显示信息,默认隐藏,需要时在iframe中调用,宽高设置为100%. 实现如下: //遮罩层 .showmask { position: fixed; z-index: 99; width: 100%; height: 100%; background-color: silve

jquery遮罩层的实现

首先,实际上新的窗口并不是创建出来再弹出来,而是将原本隐藏的重新显示出来. html结构如下: <div> <!-->页面内容<--> </div> <div class="mask"> <!-->蒙版<--> </div> <div class="toDisplay"> <!-->弹出层<--> </div> 点击Butt

JQuery 遮罩层弹窗

var str = "<div id=\"zhezhao\" style=\"display:none; background-color: rgba(0,0,0,0.3); width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 9999;\">"; str += "<div id=\"tanchuang\"

jQuery弹出遮罩层效果完整示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Jquery实现遮罩层,就是弹出DIV周围都灰色不能操作

<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3

jquery实现div遮罩层

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

jQuery点击图片弹出大图遮罩层

使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产品展示功能过程中,因为要把产品图片的大图显示给用户看,就使用jQuery制作了一个插件:HoverTreeShow ,使用该插件可以很方便的弹出图片的大图,已经运用在项目中了,除了上面链接的示例外,HoverTreeTop项目的产品展示也是一个实例,请访问链接:http://hovertree.co

自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦 先附上源代码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg