一個jquery外掛,頁面上的等待提示
阿新 • • 發佈：2019-02-10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script src="http://static.blog.csdn.net/scripts/jquery.js"></script> <script type="text/javascript"> /** * 使用方法: * 開啟:MaskUtil.mask(); * 關閉:MaskUtil.unmask(); * * MaskUtil.mask('其它提示文字...'); */ // MaskUtil Start var MaskUtil = (function(){ var $mask,$maskMsg; var defMsg = '正在處理，請稍待。。。'; function init(){ if(!$mask){ $mask = $("<div></div>") .css({ 'position' : 'absolute' ,'left' : '0' ,'top' : '0' ,'width' : '100%' ,'height' : '100%' ,'opacity' : '0.3' ,'filter' : 'alpha(opacity=30)' ,'display' : 'none' ,'background-color': '#ccc' }) .appendTo("body"); } if(!$maskMsg){ $maskMsg = $("<div></div>") .css({ 'position': 'absolute' ,'top': '50%' ,'margin-top': '-20px' ,'padding': '5px 20px 5px 20px' ,'width': 'auto' ,'border-width': '1px' ,'border-style': 'solid' ,'display': 'none' ,'background-color': '#ffffff' ,'font-size':'14px' }) .appendTo("body"); } $mask.css({width:"100%",height:$(document).height()}); var scrollTop = $(document.body).scrollTop(); $maskMsg.css({ left:( $(document.body).outerWidth(true) - 190 ) / 2 ,top:( ($(window).height() - 45) / 2 ) + scrollTop }); } return { mask:function(msg){ init(); $mask.show(); $maskMsg.html(msg||defMsg).show(); } ,unmask:function(){ $mask.hide(); $maskMsg.hide(); } } }()); // MaskUtil End function doSomething(msg){ MaskUtil.mask(msg); setTimeout(function(){ // 模擬操作時間,3秒後關閉 MaskUtil.unmask(); },3000); } </script> </head> <body> <input type="button" value="操作" onclick="doSomething()"> <input type="button" value="操作2" onclick="doSomething('正在查詢中...')"> </body> </html>