Mask: masks a specified element.

Mask: masks a specified element.
If you don't talk much about it, go directly to the Code:

Ps: dependent on jquer. js

1. First, define an Overlay. js
The Code is as follows:

/* Mask Overlay js object */function Overlay (options) {// {targetId: '', viewHtml:'', viewWidth: '', viewHeight: ''} try {this. state = false; // The status of the mask is enabled by true. false indicates that this is not activated. 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': '# ffff', 'border': '1px solid #237AD3', 'display ': 'none', 'width': this. viewWidth + 'px ', 'height': this. viewHeight + 'px ', 'z-Index': '20170', 'position': 'absolute', 'top': '0', 'right ': '0'}); // trim ({'display': 'No Ne '}); // override ({'position': 'relative'}); // set the coverage target positionto relative, so that the coverage object is relatively located (this.tar getElement ). append (this. bgElement); $ (document. body ). append (this. viewPanel);} catch (e) {alert ('overlay, initialization failed! ') ;}} Overlay. prototype. show = function (obj) {var that = this; returns (that.bgelement).css ({'display': 'block '}); // set the height and coverage target of the covering to ensure that the covering remains unchanged (in IE6, this is required to enable the covering) (that.bgelement).css ({'height': Using (that.tar getElement ). height () + 'px '}); // obtain the coordinates of the mouse and click it to display the visual panel var vp =$ (obj ). offset (); var bgW = $ (this. bgElement ). width (); var bgP =$ (this. bgElement ). offset (); vp. top = vp. top-that.viewHeight-2; // adjust position // temporarily only adjust the left boundary 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 so that the vp is not crowded on the edge. left-= 5;} Comment (this.viewpanel).css ({'top': vp. top + 'px ', 'left': vp. left + 'px ', 'display': 'block'}); that. state = true; // activate the mask} Overlay. prototype. hide = function () {var that = this; then (that.bgelement).css ({'display': 'none'}); then (that.viewpanel}.css ({'display': 'none'}); that. state = true; // activate the mask. state = false; // The mask is not activated}

2. Introduce the following overlay.css file to 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 masked object targetId: it refers to the overwritten element ID (required), <span style = "font-family: Arial, Helvetica, sans-serif; "> viewHtml: the html content of the box displayed after the mask is enabled (as you write, play freely, 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: 'specifies the height of the box (25 by default ), width and height can be adjusted as needed </span>

Var overlay = new Overlay ({targetId: 'datalistdiv ', viewHtml: 'test '});

4. It should be difficult to run it. The general process is like this;