Home > Developer > JavaScript
Whether it is to do the website or some application systems, are inevitably need to use some of the pop-up effect, In the ZJ-BLOG V1.0 Beta2 version I in some functions using the network more popular imitation XP shutdown effect of the pop-up function, according to the current response, the effect is good. Next we will take a look at this function. If you need it, you can directly use it on your own website or application system.
The code is not described in detail. It should be noted that in the IE environment before the code is posted, the pop-up div element cannot cover the drop-down box element because the select element has a high priority, an annoying ie bug (I personally think it is BUG ^ o ^). I used to hide all the select elements on the page when the pop-up occurs, the link window is displayed again. Haha, the method is stupid, but I really cannot find a better way...
There are two effects posted here. The first is that the page background is directly translucent when the pop-up is displayed, and the second is a little more similar to the XP shutdown effect, that is to say, the background is a process of gradually becoming translucent. You can observe the differences between the two effects, all of which have passed IE6 and firefox tests.
First:
<! 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"> <pead> <title> </title> <style> html, body {font-size: 12px; margin: 0px; height: 100% ;}. mesWindow {border: #666 1px solid; background: # fff ;}. mesWindowTop {border-bottom: # eee 1px solid; margin-left: 4px; padding: 3px; font-weight: bold; text-align: left; font-size: 12px ;}. mesWindowContent {margin: 4px; font-size: 12px ;}. mesWindow. close {height: 15px; width: 28px; border: none; cursor: pointer; text-decoration: underline; background: # fff} </style> </pead> <body> the <select> <option> drop-down </option> </select> dialog box is hidden, when it is closed, it is displayed to prevent the pop-up DIV from being blocked by the drop-down box in IE. the pop-up window is displayed. </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Second (note that the pop-up background gradually becomes translucent ):
<! 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"> <pead> <title> </title> <style> html, body {font-size: 12px; margin: 0px; height: 100% ;}. mesWindow {border: #666 1px solid; background: # fff ;}. mesWindowTop {border-bottom: # eee 1px solid; margin-left: 4px; padding: 3px; font-weight: bold; text-align: left; font-size: 12px ;}. mesWindowContent {margin: 4px; font-size: 12px ;}. mesWindow. close {height: 15px; width: 28px; border: none; cursor: pointer; text-decoration: underline; background: # fff} </style> </pead> <body> dialog box <select ID = "Select1" NAME = "Select1"> <option> drop-down </option> </select> The pop-up window will hide it, when it is closed, it is displayed to prevent the pop-up DIV from being blocked by the drop-down box in IE. the pop-up window is displayed. </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
