"Lightbox" is a chic and easy-to-use picture display that allows a picture to be rendered directly above the current page without having to go to a new window. Lightbox effect on the network has a lot of JS version of the introduction. But all download a lightbox JS small then dozens of K, big is on hundred K. If you just need a similar lightbox effect, this absolute pure CSS manufacturing, does not contain JS method can try.
The following is a reference fragment:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title> Pure CSS Lightbox effect </title>
<style>
. black_overlay{
Display:none;
Position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
Background-color:black;
z-index:1001;
-moz-opacity:0.8;
opacity:.80;
Filter:alpha (opacity=80);
}
. white_content {
Display:none;
Position:absolute;
top:25%;
left:25%;
width:50%;
height:50%;
padding:16px;
BORDER:16PX solid Orange;
Background-color:white;
z-index:1002;
Overflow:auto;
}
</style>
<body>
<p>this is the main content. To display a Lightbox click <a href = "javascript:void (0)" onclick = "document.getElementById (' Light '). style.display= ' Block ';d Ocument.getelementbyid (' fade '). style.display= ' Block ' >here</a></p>
<div id= "Light" class= "White_content" >this is the Lightbox content. <a href = "javascript:void (0)" onclick = "document.getElementById (' Light '). style.display= ' None '; document.getElementById (' fade '). style.display= ' None ' ">Close</a></div>
<div id= "Fade" class= "Black_overlay" ></div>
</body>
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
