In development, the masking layer is becoming more and more common in order to avoid two submissions.
Read a lot of code, below to share with you what I think is the simplest mask layer implementation method:
1. The style is set as follows:
CSS Code :
[HTML]View PlainCopy
- <style type="Text/css">
- . Mask {
- Position:absolute; top:0px; Filter:alpha (opacity=); Background-color: #777;
- z-index:1002; left:0px;
- opacity:0.5; -moz-opacity:0.5;
- }
- </style>
Among them: opacity:0.5; apply to IE,-moz-opacit:0.5; apply to Firefox; you can use both Firefox and IE, all you need to add.
2. Specify the height, and width of the layer.
JS Code
[JavaScript]View PlainCopy
- <pre class="html" name="code" ><script type="Text/javascript" >
- //compatible with Firefox, IE8
- //Show Matte layer
- function Showmask () {
- $ ("#mask"). CSS ("height", $ (document). Height ());
- $ ("#mask"). CSS ("width", $ (document). width ());
- $ ("#mask"). Show ();
- }
- //Hide Mask layer
- function Hidemask () {
- $ ("#mask"). Hide ();
- }
- </script>
3. Add the following code to <body> and then you can see the effect:
HTML code
[HTML]View PlainCopy
- <div id="Mask" class="Mask"></div>
- <a href="javascript:;" onclick="Showmask ()" > Point I show Mask layer </a><br />
4. How to use:
After the Ajax submission form, add the Showmask method, after the data is returned, plus hidemask ()
The needs of the pro can be based on their own needs, in the mask layer above the above to add some information
jquery Ultra Simple masking layer implementation code