jquery Ultra Simple masking layer implementation code

Source: Internet
Author: User

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
  1. <style type="Text/css">
  2. . Mask {
  3. Position:absolute; top:0px;     Filter:alpha (opacity=); Background-color: #777;
  4. z-index:1002; left:0px;
  5. opacity:0.5; -moz-opacity:0.5;
  6. }
  7. </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
  1. <pre class="html" name="code" ><script type="Text/javascript" >
  2. //compatible with Firefox, IE8
  3. //Show Matte layer
  4. function Showmask () {
  5. $ ("#mask"). CSS ("height", $ (document). Height ());
  6. $ ("#mask"). CSS ("width", $ (document). width ());
  7. $ ("#mask"). Show ();
  8. }
  9. //Hide Mask layer
  10. function Hidemask () {
  11. $ ("#mask"). Hide ();
  12. }
  13. </script>

3. Add the following code to <body> and then you can see the effect:

HTML code

[HTML]View PlainCopy
    1. <div id="Mask" class="Mask"></div>
    2. <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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.