jquery Mask Layer Implementation method examples (with mask layer plugin) _jquery

The implementation method of jquery masking layer is analyzed in this paper. Share to everyone for your reference, specific as follows:

1 Background Translucent mask layer style

Requires a black (and, of course, other) background, and must be set to absolute positioning, following is the CSS style used in the project:

* * Translucent Matte 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 layers here are larger than the page
  /display:none;
}

2 jquery Implementation Mask

/* Show matte layer
/function Showoverlay () {
  $ ("#overlay"). Height (pageheight ());
  $ ("#overlay"). Width (pagewidth ());
  Fadeto The first parameter is the speed, the second is transparency
  //Multiple control transparency, guarantees compatibility, but also brings the problem of modification
  $ ("#overlay"). Fadeto (0.5);
/* Hide Overlay */
function Hideoverlay () {
  $ ("#overlay"). fadeout;
/* 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 to make people unable to manipulate the content, highlighting the prompt box, and the cue box can refer to the production above, z-index than the mask layer is higher. The main question is how to control the prompt box in the center of the browser.

 * Navigates 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 () + (WindowWidth ()/2)-(W/2);
  if (L < 0) L = 0;
$ (ID). css ({left:l+ ' px ', top:t+ ' px '});
  }//Browser viewport's height function windowheight () {var de = document.documentelement; return Self.innerheight | | (de && de.clientheight) | |
Document.body.clientHeight;
  }//Browser viewport width function windowwidth () {var de = document.documentelement; return Self.innerwidth | | (de && de.clientwidth) | |
  Document.body.clientWidth}/* Browser vertical scrolling Position * * Function scrolly () {var de = document.documentelement; return Self.pageyoffset | | (de && de.scrolltop) | |
Document.body.scrollTop;
  } * * Browser horizontal scrolling position/function scrollx () {var de = document.documentelement; return Self.pagexoffset | | (de && de.scrollleft) | |
Document.body.scrollLeft; }

Add:

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 (' <div id= "ui-mask" ></div><div id= "Ui-mask-div" style= "z-index:99999;position: Fixed;top: ' + options.top + ' Px;left: ' + options.left + ' px; ' ><span> operation is in progress, please be patient ......</span></div> ')
    _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-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;
}

How to use:

function Btn_save ()
{
  $ (this). Showmask ();
  $.post (' url ', null,function (d,s) {
    $ (this). Hidemask ();
  });

I hope this article will help you with the jquery program design.