一个jquery插件,页面上的等待提示

来源：互联网发布：gps军用级精度知乎编辑：程序博客网时间：2024/06/01 10:31
<!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 Startvar 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 Endfunction 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>
1 0