Div + Css implement Blocking Effect

Yahoo's YUI control is used during project creation. The datatable is very convenient, but sometimes you need to block the click table event, so I thought of using div + Css to achieve this effect.

【]

All in all, when an event is triggered, such as a button click event. Display a previously defined div and use Css to control the position. The z-index attribute must be,

A greater value indicates that when the div layer overlaps, it is at the top.

Note:

[Size of the mask layer]

1. Use JS to determine the resolution of your monitor, obtain the two parameters of length and width, and assign these two parameters to the Div on the second layer as the pixel value of its length and width, in this way, the same effect can be displayed on large or small displays.

2. CSS style sheets: In this method, the length and width of the mask layer can be set in advance, but some problems may occur: if the width and length of the mask layer are large, the browser scroll bar will appear on the small display ~~ Otherwise, the mask will fail.

Because of the HTML model, I used the second method. There was an unreasonable solution: I disabled the scroll bar below the browser (horizontal. Code: write in the CSS style sheetHtml, body {overflow-x: hidden ;}

[Mask layer style]1. Set the position of the three Div layers to absolute, because the z-index: attribute takes effect only when it is set to absolute!

2. translucent attribute: filter: alpha (opacity = 50); IE private attribute, set the transparency of the layer to 50%,

-Moz-opacity: 0.5; Firefox FF private attribute. Set the layer transparency to 50%.

These two attributes must be added, because IE and Firefox are not compatible with one of them ~~~

In addition, you must set the width and height in the mask layer style. Otherwise, the transparency attribute will not work ~~

3. z-index: Order. The smaller the value of z-index: attribute, the lower the layer is, and the minimum value is 1.

[Sample Code]

1. Overwrite div

Copy to ClipboardReference: [www.bkjia.com] # apDiv8 {}{
Position: absolute;
Left: 57px;
Top: 30px;
Width: 668px;
Height: 240px;
Z-index: 1000;
Background-color: # CCCCCC;
Filter: progid: DXImageTransform. Microsoft. Alpha (enabled = true, style = 0, opacity = 40 );
}

2. Event call

Copy to ClipboardReference: [www.bkjia.com] function divl (){
Document. getElementById ('apache8'). style. display = 'block ';
}
<Div id = "apDiv8" style = "display: none;">
<Input type = "button" id = "btnadd" style = "height: 30px; width: 100px;" onClick = "divl ()" value = "Div overwrite"/>