Click the pop-up center with transparent matte Layer window:
This section describes how to click on a button to implement pop-up a center window, and this window with a translucent matte layer effect, this effect is more popular in the present, of course, there are more complex implementation, of course, the effect is more brilliant, the following code can be simple to achieve this effect.
The code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">#fade{Display:None;position:Absolute;Top:0%; Left:0%;width:100%;Height:100%;Background-color:Black;Z-index:1001;-moz-opacity:0.8;Opacity:.;Filter:Alpha (opacity=80);}#light{Display:None;position:Absolute;Top:25%; Left:25%;width:50%;Height:50%;padding:16px;Border:3px Solid Orange;Background-color: White;Z-index:1002;Overflow:Auto;}</style><Scripttype= "Text/javascript">window.onload=function(){ varLINKBT=document.getElementById ("LINKBT"); var Light=document.getElementById (' Light'); varFade=document.getElementById ('Fade'); varclosebt=document.getElementById ("closebt"); Linkbt.onclick=function() {Light.style.display='Block'; Fade.style.display='Block'; } Closebt.onclick=function() {Light.style.display='None'; Fade.style.display='None'; }}</Script></Head><Body><ahref= "javascript:void (0)"ID= "LINKBT">Click here to open the window</a><DivID= "Light"><ahref= "javascript:void (0)"ID= "Closebt">Close window</a></Div><DivID= "Fade""></Div></Body></HTML>
The above code implements our requirements, the following is a brief introduction of its implementation process.
I. Principle of implementation:
By default, masking layers and windows are invisible, and when clicked, the window and mask layer can be displayed, and the matte layer is set to semitransparent. Both of these elements use absolute positioning and the Z-index property value of the center window is greater than the mask layer, so that it can be overlaid on top of the matte layer. When you click the Close button, you can hide the mask layer and the window, which is basically the principle.
Two. Related reading:
1. The transparency setting can be found in the section on how CSS sets the div background transparency and is well-compatible .
2.z-index can refer to the Z-index Properties section of CSS .
3.onclick events can be found in the OnClick events section of JavaScript .
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=12001
For more information, refer to: http://www.softwhy.com/javascript/
Click Pop-up center with transparent matte Layer window
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
