In the Ajax big line of today, analog pop-up window, or Thinkbox,greybox and many other special effects are using the Mask function, its application for us is also very simple: create an absolute positioning, Top/left are 0, width and height equals browser content of the high width, The index can then be set to a larger point. But here are some questions and techniques that you may have been unaware of or unclear about, here is a summary of the points, these are the personal learning process found.
1. Created masks if you want to prevent actions on the lower part of the mask, you must set the Background property and you must set a valid value, or you can still manipulate the elements at the bottom of the page, even though the mask layer was created successfully.
2, if you want to display the elements at the bottom of the page can be set through the CSS transparency to achieve, such as Filter:alpha (opacity=0), here is completely transparent, indifferent can also be set to translucent.
3, the formation of the div layer mask can be blindfolded, but cannot cover the select and object.
4, you can use an IFRAME can cover select, general use of IFrame and Div combined method to cover the Select (Div so is higher than the z index of IFRAME) and create content, in fact, the IFRAME will automatically hide select, You can also only use div and JS to hide the Select.
5, for the use of JS hidden Select method is mostly in the creation of real masks, such as pop-up box or Thinkbox. The use of IFrame and Div is primarily used for local masks, such as a date control or title popup, which uses an IFrame and div to locate a select control that can be obscured under the same position.
The following is a summary of the above demo:
(1) Do not set the background property of the Div mask. {After the mask appears, the elements behind it can still be manipulated}
<! 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&G t;</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>bbbbbbbbbbbbbbbb</p> & Lt;script type= "Text/javascript" > <!--function pop () {var h=document.documentelement.clientheight; var w=document.documentelement.clientwidth; var div=document.createelement ("<div +w+" px;height: "+h+" PX; ' ></div> "); Div.appendchild (document.createTextNode ("xxxxxxxxxxxxxxxxxxxx")); Document.body.appendChild (DIV); }//--> </script> </body> </html>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Current 1/3 page
123 Next read the full text
