Home > Developer > JavaScript
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}
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "zh-CN" lang = "zh-CN"> <pead> <title> </title> <meta http-equiv = "Content-Type" content = "text /html; charset = gb2312 "/> </pead> <body> <input type =" button "onclick =" pop () "value =" pop-up mask layer "/> <input type =" text "value =" input box "/> cccccccccccccccc <p> aaaaaaaaaaaa </p> <p> bbbbbbbbbbbbbbbbbb </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
