jquery简洁遮罩插件
/************************** *Desc:提交操作时遮罩 *Argument:type=0 全屏遮 1局部遮 *Author:Zery-Zhang *Date:2014-09-18 *Version:1.0.0 **************************/ ; (function ($) { $.fn.jqLoading =function(option) { var defaultVal = { backgroudColor: "#ECECEC",//背景色 backgroundImage: "../image/loading.gif",//背景图片 text: "玩命加载中....",//文字 width: 150,//宽度 height: 60,//高度 type:0 //0全部遮,1 局部遮 }; var opt = $.extend({}, defaultVal, option); if (opt.type == 0) { //全屏遮 openLayer(); } else { //局部遮(当前对象应为需要被遮挡的对象) openPartialLayer(this); } //销毁对象 if (option === "destroy") { closeLayer(); } //设置背景层高 function height () { var scrollHeight, offsetHeight; // handle IE 6 if ($.browser.msie && $.browser.version < 7) { scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight); offsetHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight); if (scrollHeight < offsetHeight) { return $(window).height(); } else { return scrollHeight; } // handle "good" browsers } else if ($.browser.msie && $.browser.version == 8) { return $(document).height() - 4; } else { return $(document).height(); } }; //设置背景层宽 function width() { var scrollWidth, offsetWidth; // handle IE if ($.browser.msie) { scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth); offsetWidth = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth); if (scrollWidth < offsetWidth) { return $(window).width(); } else { return scrollWidth; } // handle "good" browsers } else { return $(document).width(); } }; /*==========全部遮罩=========*/ function openLayer() { //背景遮罩层 var layer = $("<div ></div>"); layer.css({ zIndex:9998, position: "absolute", height: height() + "px", width: width() + "px", background: "black", top: 0, left: 0, filter: "alpha(opacity=30)", opacity: 0.3 }); //图片及文字层 var content = $("<div ></div>"); content.css({ textAlign: "left", position:"absolute", zIndex: 9999, height: opt.height + "px", width: opt.width + "px", top: "50%", left: "50%", verticalAlign: "middle", background: opt.backgroudColor, borderRadius:"8px", fontSize:"13px" }); content.append("<img +(opt.height/4)+"px; 0 0 5px;margin-right:5px;' src='" + opt.backgroundImage + "' /><span >" + opt.text + "</span>"); $("body").append(layer).append(content); var top = content.css("top").replace('px',''); var left = content.css("left").replace('px',''); content.css("top",(parseFloat(top)-opt.height/2)).css("left",(parseFloat(left)-opt.width/2)); return this; } //销毁对象 function closeLayer() { $("#layer,#content,#partialLayer").remove(); return this; } /*==========局部遮罩=========*/ function openPartialLayer(obj) { var eheight = $(obj).css("height");//元素带px的高宽度 var ewidth = $(obj).css("width"); var top = $(obj).offset().top; // 元素在文档中位置 滚动条不影响 var left = $(obj).offset().left; var layer = $("<div ></div>"); layer.css({ style: 'z-index:9998', position: "absolute", height: eheight, width: ewidth, background: "black", top: top, left: left, filter: "alpha(opacity=60)", opacity: 0.6, borderRadius:"3px", dispaly: "block" }); $("body").append(layer); return this; } }; })(jQuery)
jQuery 1.9较之前版本的变化,主要介绍移除方法的替代方法:.browser、.live、.die、.sub、.toggle 。如果是大家用的是jquery 1.9以后的版本请用下面的插件代码
/************************** *Desc:提交操作时遮罩 *Argument:type=0 全屏遮 1局部遮 *Author:Zery-Zhang *Date:2014-09-18 *Version:1.0.0 **************************/ ; (function ($) { $.fn.jqLoading =function(option) { var defaultVal = { backgroudColor: "#ECECEC",//背景色 backgroundImage: "../../JScripts/Load/image/loading.gif",//背景图片 text: "正在加载中,请耐心等待....",//文字 width: 150,//宽度 height: 60,//高度 type:0 //0全部遮,1 局部遮 }; var opt = $.extend({}, defaultVal, option); if (opt.type == 0) { //全屏遮 openLayer(); } else { //局部遮(当前对象应为需要被遮挡的对象) openPartialLayer(this); } //销毁对象 if (option === "destroy") { closeLayer(); } //设置背景层高 function height () { var scrollHeight, offsetHeight; // handle IE 6 if ($.support.boxModel && $.support.leadingWhitespace) { scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight); offsetHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight); if (scrollHeight < offsetHeight) { return $(window).height(); } else { return scrollHeight; } // handle "good" browsers } else if ($.support.objectAll) { return $(document).height() - 4; } else { return $(document).height()+500; } }; //设置背景层宽 function width() { var scrollWidth, offsetWidth; // handle IE if ($.support.boxModel) { scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth); offsetWidth = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth); if (scrollWidth < offsetWidth) { return $(window).width(); } else { return scrollWidth; } // handle "good" browsers } else { return $(document).width(); } }; /*==========全部遮罩=========*/ function openLayer() { //背景遮罩层 var layer = $("<div ></div>"); layer.css({ zIndex:9998, position: "absolute", height: height() + "px", width: width() + "px", background: "black", top: 0, left: 0, filter: "alpha(opacity=30)", opacity: 0.3 }); //图片及文字层 var content = $("<div ></div>"); content.css({ textAlign: "left", position:"absolute", zIndex: 9999, height: opt.height + "px", width: opt.width + "px", top: "50%", left: "50%", verticalAlign: "middle", background: opt.backgroudColor, borderRadius:"8px", fontSize:"13px" }); content.append("<img +(opt.height/4)+"px; 0 0 5px;margin-right:5px;' src='" + opt.backgroundImage + "' /><span >" + opt.text + "</span>"); $("body").append(layer).append(content); var top = content.css("top").replace('px',''); var left = content.css("left").replace('px',''); content.css("top",(parseFloat(top)-opt.height/2)).css("left",(parseFloat(left)-opt.width/2)); return this; } //销毁对象 function closeLayer() { $("#layer,#content,#partialLayer").remove(); return this; } /*==========局部遮罩=========*/ function openPartialLayer(obj) { var eheight = $(obj).css("height");//元素带px的高宽度 var ewidth = $(obj).css("width"); var top = $(obj).offset().top; // 元素在文档中位置 滚动条不影响 var left = $(obj).offset().left; var layer = $("<div ></div>"); layer.css({ style: 'z-index:9998', position: "absolute", height: eheight, width: ewidth, background: "black", top: top, left: left, filter: "alpha(opacity=60)", opacity: 0.6, borderRadius:"3px", dispaly: "block" }); $("body").append(layer); return this; } }; })(jQuery)
引入js
<script src="../Scripts/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="../Scripts/jquery-ui-jqLoding.js" type="text/javascript"></script>
调用:
<body> <input type="button" value="打开全局" /> <input type="button" value="关闭全局" /> <script type="text/javascript"> $(function () { $("#btnOpen2").on("click", function () { $.fn.jqLoading({ height: 100, width: 240, text: "正在加载中,请耐心等待...." }); setTimeout(function () { $.fn.jqLoading("destroy"); }, 3000); }); }) </script> <input type="button" value="遮罩我" /> <input type="button" value="关闭" /> <script type="text/javascript"> $(function () { $("#btnOpen").on("click", function () { //全局 //$(this).jqLoading(); //局部 $(this).jqLoading({ type: 1 }); }); $("#btnClose").on("click", function () { $(this).jqLoading("destroy"); }); })</script> </body>
- 上一篇 »Jquery+CSS实现遮罩效果
- 下一篇 »CSS实现 全屏 遮罩 - 勤学如春起之苗