Matte, masking on the specified element

Nonsense not much to say, directly on the code:

PS: Dependent jquer.js

1. First, define a overlay.js
The code is as follows:

/* Mask Overlay js object */function Overlay (options) {//{targetid: ', viewhtml: ', Viewwidth: ', viewheight: '}try{this.state =false;//Mask state True activates, false does not activate this.bgelementid= ' OVERLAY_BG '; this.bgelement=document.createelement (' DIV '); $ ( this.bgelement). attr (' id ', this.bgelementid); this.viewhtml=options[' viewhtml '];this.viewpanel= Document.createelement (' DIV '); this.viewwidth=options[' viewwidth ']|320;this.viewheight=options[' viewHeight ']|25 ; $ (This.viewpanel). css ({' Background-color ': ' #FFFFFF ', ' border ': ' 1px solid #237AD3 ', ' Display ': ' None ', ' width ': this.viewwidth+ ' px ', ' height ': this.viewheight+ ' px ', ' z-index ': ' 1002 ', ' position ': ' absolute ', ' top ': ' 0 ', ' right ': ' 0 ' });//Hide $ (this.viewpanel) first. Append (this.viewhtml); this.targetid=options[' Targetid '];this.targetelement=$ (' # ' + This.targetid); $ (this.bgelement). css ({' Display ': ' None '});//Hide $ (this.bgelement). attr (' class ', ' Bgoverlay '); $ ( this.targetelement). css ({' position ': ' relative '});//overwrite target position set to relative for easy overlay relative positioning $ (this.targetelement). Append (this.bgelement); $ (document.body). Append (This.viewpanel);} catch (E) {alert (' Overlay, initialization failed! ');}}            Overlay.prototype.show=function (obj) {var = this;            $ (that.bgelement). css ({' Display ': ' Block '});            Setting the height of the overlay and covering the target guarantee always (IE6 need to do this to open the cover) $ (that.bgelement). css ({' Height ': $ (that.targetelement). Height () + ' px '});            Get mouse click coordinates display visual panel var VP = $ (obj). offset ();            var BgW = $ (this.bgelement). width ();            var BgP = $ (this.bgelement). offset ();            vp.top=vp.top-that.viewheight-2;//adjustment position//temporarily only to the left edge of the adjustment process Var Isleftoverstep=false;            while ((Vp.left+that.viewwidth) > (BGP.LEFT+BGW)) {isleftoverstep=true;            vp.left--;            if (isleftoverstep) {//If it is out of bounds and adjusted, then adjust 5 pixels, not to squeeze on the edge of the vp.left-=5;            } $ (This.viewpanel). css ({' Top ': vp.top+ ' px ', ' Left ': vp.left+ ' px ', ' Display ': ' Block '});   that.state=true;//activation Mask}overlay.prototype.hide=function () {var that = this; $(that.bgelement). css ({' Display ': ' None '});            $ (That.viewpanel). css ({' Display ': ' None '}); that.state=true;//activates the matte. state=false;//No activation Matte}

2. The following overlay.css file is introduced into the page

The code is as follows:

/* Mask style \*/.bgoverlay{display:none;  Position:absolute;  top:0%;  left:0%;  width:100%;  height:100%;  Background-color: #C4C4C4;  z-index:1001;  -moz-opacity:0.6;  opacity:.60;  Filter:alpha (opacity=60);}

3.eg:

Create a Mask object Targetid: Refers to the ID of the element being overwritten (required), <span style= "font-family:arial, Helvetica, Sans-serif;" >viewhtml: Refers to the HTML content of the box shown when the mask is enabled (as you write, free to play, required), </span><span style= "font-family:arial, Helvetica, Sans-serif; " >viewwidth: The width of the box (default 320</span><span style= "Font-family:arial, Helvetica, Sans-serif;") > Optional </span><span style= "font-family:arial, Helvetica, Sans-serif;" >), viewheight: ' Box height (default 25 optional), wide height can be adjusted according to your needs </span>

var overlay=new overlay ({targetid: ' Datalistdiv ', viewhtml: ' Test '});

4. Run it should not be a problem, probably the flow of the end;

Matte, masking on the specified element