JQuery mask layer plug-in and jquery mask plug-in

JQuery mask layer plug-in and jquery mask plug-in

Operations that take a long time on the webpage, such as exporting reports, are often encountered. To prevent users from clicking another operation or clicking the same function multiple times, you must use the mask layer to cover the page or operation area to prevent users from performing the next operation and improve the interface friendliness, let the user know that the operation is being executed.

$. Fn. extend ({/*** Add a mask layer to the element * @ param message {String} [Optional] content displayed on the mask layer */mask: function (message) {var $ target = this, fixed = false, targetStatic = true; if (Object. prototype. toString. call (message )! = '[Object String]' |! Message) {// if the message is null or is not a string, use the default message prompt. Message = 'Please wait... ';} If ($ target. length = 0) {$ target = $ ('body');} else {if ($ target. length> 1) {$ target = $ target. first ();} if ($ target [0] === window | $ target [0] === document) {$ target = $ ('body') ;}} if ($ target [0] === document. body) {fixed = true;} // if the target element already has a mask layer, obtain the mask layer var old = $ target. data ('rhui. mask '); if (old) returns old.content.html (message); center ($ target, old. $ content, fixed); return;} // If the covered element is static, change the element to relati. Veif (appstarget.css ('position') = 'state') {targetStatic = true?=target.css ('position', 'relative ');} var $ content, $ overlay; if (fixed) {$ overlay = $ ('<div class = "rhui-mask" style = "position: fixed;"> </div> '); $ content = $ ('<div class = "rhui-mask-content" style = "position: fixed;">' + message + '</div> ');} else {$ overlay = $ ('<div class = "rhui-mask"> </div> '); $ content = $ ('<div class = "rhui-mask-content">' + Message + '</div>');} $ overlay. appendTo ($ target); $ content. appendTo ($ target); // display the mask layer $ overlay. show (); $ content. show (); // center the mask layer to the center ($ target, $ content, fixed); // Add the information of the mask layer to $ target. data ('rhui. mask ', {fixed: fixed, $ overlay: $ overlay, $ content: $ content, targetStatic: targetStatic }); /*** display the content of the mask layer in the center * @ param $ target covered element * @ param $ content mask layer content element * @ param fixed whether the mask layer is fixed */function center ($ target, $ Content, fixed) {var $ window, height = $ content. outerHeight (true), width = $ content. outerWidth (true); if (fixed) {// if the mask layer is fixed, center the mask layer in the window. $ window = blank (window?##content.css ({left: ($ window. width ()-width)/2, top: ($ window. height ()-height)/2});} else {// render content.css ({left: ($ target. width ()-width)/2, top: ($ target. height ()-height)/2}) ;}},/*** cancel Mask Layer */unmask: function () {Var $ target; if (this. length = 0) {$ target = $ ('body');} else {$ target = this. first (); if ($ target [0] === window | $ target [0] === document) {$ target =$ ('body ');}} var data = $ target. data ('rhui. mask'); if (! Data) {return;} // restore the position attribute of the target element if (data.tar getStatic) when using target.css ('position', 'static ');} data. $ overlay. remove (); data. $ content. remove (); $ target. removeData ('rhui. mask ');}});

The plugin style is controlled by the rhui-mask and rhui-mask-content classes. rhui-mask is the mask layer style, and rhui-mask-content is the prompt content style of the mask layer.

/* Mask layer style */. rhui-mask {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 9000; display: block; margin: 0; padding: 0; border-style: none; background-color: #777; opacity: 0.3; zoom: 1; filter: alpha (opacity = 30 );} /* specifies the content style of the mask layer */. rhui-mask-content {position: absolute; z-index: 9999; display: block; margin: 0; padding: 15px 20px; border: 2px solid rgb (109,157,215 ); background-color: # fff; color: blue; letter-spacing: 2px; font-weight: bold; font-size: 15px; cursor: wait ;}

Effect

Complete page call code

<! DOCTYPE html> 


 
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.