Jquery+CSS实现遮罩效果
JavaScript:
(function ($) { $.fn.ShowMask = function (options) { var defaults = { top: 150, left: 200 } var options = $.extend(defaults, options); $("html").append(‘<div id="ui-mask"></div><div id="ui-mask-div" style="z-index: 99999;position: fixed;top:‘ + options.top + ‘px;left:‘ + options.left + ‘px;"><img src="Images/ui-loading.gif" /><span>操作正在进行中,请耐心等待......</span></div>‘) _this_ = $("#ui-mask"); _this_.height($(document).height()) _this_.show(); }; $.fn.HideMask = function (options) { _this_ = $("#ui-mask"); _this_.remove(); }; })(jQuery);
CSS:
#ui-mask { background-color: #666; position: absolute; z-index: 9999; left: 0; top: 0; display: none; width: 100%; height: 100%; opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5; } #ui-mask-div img { width: 50px; height: 50px; float: left; } #ui-mask-div span { height: 50px; line-height: 50px; display: block; float: left; color: Red; font-weight: bold; margin-left: 5px; }
JavaScript调用:
function btn_save() { $(this).ShowMask(); $.post(‘url‘,null,function(d,s){ $(this).HideMask(); }); }
大家试试吧!
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。