/************************** *Desc:提交操作時(shí)遮罩 *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 {//局部遮(當(dāng)前對象應(yīng)為需要被遮擋的對象)openPartialLayer(this);}//銷毀對象if (option === "destroy") {closeLayer();}//設(shè)置背景層高 function height () {var scrollHeight, offsetHeight;// handle IE 6if ($.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();}};//設(shè)置背景層寬 function width() {var scrollWidth, offsetWidth;// handle IEif ($.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 id='layer'></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 id='content'></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 style='vertical-align:middle;margin:"+(opt.height/4)+"px; 0 0 5px;margin-right:5px;' src='" + opt.backgroundImage + "' /><span style='text-align:center; vertical-align:middle;'>" + 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 id='partialLayer'></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:提交操作時(shí)遮罩 *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 {//局部遮(當(dāng)前對象應(yīng)為需要被遮擋的對象)openPartialLayer(this);}//銷毀對象if (option === "destroy") {closeLayer();}//設(shè)置背景層高 function height () {var scrollHeight, offsetHeight;// handle IE 6if ($.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;}};//設(shè)置背景層寬 function width() {var scrollWidth, offsetWidth;// handle IEif ($.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 id='layer'></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 id='content'></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 style='vertical-align:middle;margin:"+(opt.height/4)+"px; 0 0 5px;margin-right:5px;' src='" + opt.backgroundImage + "' /><span style='text-align:center; vertical-align:middle;'>" + 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 id='partialLayer'></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>

調(diào)用：

<body><input type="button" id="btnOpen2" value="打開全局" /><input type="button" id="btnClose2" value="關(guān)閉全局" /><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" id="btnOpen" value="遮罩我" /><input type="button" id="btnClose" value="關(guān)閉" /><script type="text/javascript">$(function () {$("#btnOpen").on("click", function () {//全局//$(this).jqLoading();//局部$(this).jqLoading({ type: 1 });});$("#btnClose").on("click", function () {$(this).jqLoading("destroy");});})</script> </body>

?

轉(zhuǎn)載于:https://www.cnblogs.com/zyh1994/p/9798345.html

總結(jié)

以上是生活随笔為你收集整理的jquery简洁遮罩插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。