Summary of some tips for creating a page mask in Javascript page 1/3

Source: Internet
Author: User

Today, when Ajax is widely used, the pop-up window simulation, thinkbox, greybox, and many other special effects use the masked functions. Its application is also very simple for us: Creating an absolute positioning, the top/left values are both 0, and the width and height are equal to the height and width of the browser content. Then, you can set the index to a greater value. However, there are some problems and skills that you may not know or are not clear about. Here we will summarize some points that are found during the personal learning process.

1. If you want to disable operations on the lower part of the mask, you must set the background attribute and a valid value. Otherwise, although the mask layer is successfully created, however, you can still operate on the elements in the lower part of the page.

2. If you want to display the elements at the bottom of the page, you can set the transparency through CSS, for example, filter: alpha (opacity = 0). Here it is completely transparent, and you can also set it to translucent.

3. The block formed by the DIV layer can mask IFRAME, but cannot cover select and object.

4. IFRAME can be used to cover select. Generally, IFRAME and Div can be used to cover select (div is higher than the Z index of IFRAME) and create content, in fact, IFRAME will automatically hide the SELECT statement. You can also hide the SELECT statement only using Div and Js.

5. Most of the methods for hiding select using JS are used when creating a real mask, such as a pop-up box or thinkbox. IFRAME and Div are mainly used for partial masks. For example, when the date control or title is displayed, IFRAME and Div are positioned at the same position to cover the select control.

The following is a summary of the above demos:
(1) do not set the DIV mask of the background attribute. {The elements behind the board can still be operated after they appear}Xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "ZH-CN" lang = "ZH-CN">


Cccccccccccccc

Aaaaaaaaaaaa

Bbbbbbbbbbbbbbbbbb

Related Article

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.