Examples of jQuery mask layer implementation method (with the mask layer plug-in) _ jquery-js tutorial

This article mainly introduces the implementation method of the jQuery mask layer, and analyzes the style and function implementation skills of the jQuery mask layer in detail based on the instance form, A simple jQuery mask layer plug-in implementation method is provided. If you need it, you can refer to the examples in this article to analyze the implementation method of the jQuery mask layer. We will share this with you for your reference. The details are as follows:

1. Background translucent mask layer style

A black (or other) background is required and must be set to absolute positioning. The following is the css style used in the project:

/* Translucent Mask Layer */# overlay {background: #000; filter: alpha (opacity = 50);/* IE transparency */opacity: 0.5; /* Transparency */display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100; /* The layer here must be greater than the page */display: none ;}

2 jQuery implementation mask

/* Display the Mask Layer */function showOverlay () {$ ("# overlay "). height (pageHeight (); $ ("# overlay "). width (pageWidth (); // The first parameter of fadeTo is speed, and the second parameter is transparency. // you can control transparency in multiple ways to ensure compatibility, but it also brings about the trouble of modifying $ ("# overlay "). fadeTo (200, 0.5);}/* hidden cover layer */function hideOverlay () {$ ("# overlay "). fadeOut (200);}/* Current page height */function pageHeight () {return document. body. scrollHeight;}/* Current page width */function pageWidth () {return document. body. scrollWidth ;}

3 prompt box

The purpose of the mask is nothing more than making it impossible to operate the content, highlighting the prompt box, and the prompt box can refer to the above preparation, z-index is higher than the mask layer. The main problem is how to control the prompt box centered in the browser.

/* Go to the page center */function adjust (id) {var w = $ (id ). width (); var h = $ (id ). height (); var t = scrollY () + (windowHeight ()/2)-(h/2); if (t <0) t = 0; var l = scrollX () + (wxwwidth ()/2)-(w/2); if (l <0) l = 0; then (id).css ({left: l + 'px ', top: t + 'px'});} // function compute wheight () {var de = document.doc umentElement; return self. innerHeight | (de & de. clientHeight) | document. body. clientHeight;} // The Width function of the browser's viewport using wwidth () {var de = document.doc umentElement; return self. innerWidth | (de & de. clientWidth) | document. body. clientWidth}/* vertical scroll position of the browser */function scrollY () {var de = document.doc umentElement; return self. pageYOffset | (de & de. scrollTop) | document. body. scrollTop;}/* horizontal scroll position of the browser */function scrollX () {var de = document.doc umentElement; return self. pageXOffset | (de & de. scrollLeft) | document. body. scrollLeft ;}

Supplement:

JQuery simple mask layer Plugin:

JQuery code:

(Function ($) {$. fn. showMask = function (options) {var defaults = {top: 150, left: 200} var options = $. extend (defaults, options); $ ("html "). append ('
The operation is in progress. Please wait ......
') _ This _ = $ ("# ui-mask"); _ this _. height ($ (document ). height () _ this _. show () ;}; $. fn. hideMask = function (options) {_ this _ = $ ("# ui-mask"); _ this _. remove () ;};}) (jQuery );

Css style:

#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-p img{  width: 50px;  height: 50px;  float: left;}#ui-mask-p span{  height: 50px;  line-height: 50px;  display: block;  float: left;  color: Red;  font-weight: bold;  margin-left: 5px;}

Usage:

function btn_save(){  $(this).ShowMask();  $.post('url',null,function(d,s){    $(this).HideMask();  });}

I hope this article will help you with jQuery programming.