CSS Lightview Style Popup
Blog » CSS/XHTML » CSS Lightview Style PopupCSS Lightview Style Popup
December 22nd, 2008
My friend and I were working on his site last week and we were in need of a popup very similar to how the lightview works. Since my friend is not very fond of using pre-built js scripts, he asked me to create the same feel from scratch. I came up with my own version mimicking the lightview effect, and thought it would be good to share the technique and get some feed back and improvement suggestions.
HTML
What I have below is a div that contains the transparent black background, and the popup on top of it. I basically have two layers on top of my content to achieve this effect.
<div id="hideshow" style="visibility:hidden;"> <div id="fade"></div> <div class="popup_block"> <div class="popup"> <a href="javascript:hideDiv()"><img src="icon_close.png" class="cntrl" /></a> <h3>Example of Styling CSS Popups</h3> <p>Eu refero pertineo vulpes, molior, vel. Mos paulatim lobortis sed pneum antehabeo, tristique damnum dolor venio mauris, decet sudo, ibidem lucidus. </p> </div> </div> </div>
CSS
I first started by creating the transparent black fade behind of the popup. I basically created an empty div, and told it to stretch 100% both horizontally and vertically, and then gave it a z-index with a relative positioning to be on top of the content layer.
#fade {
background: #000;
position: fixed;
width: 100%;
height: 100%;
filter:alpha(opacity=80);
opacity: .80;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*--IE 8 Transparency--*/
left: 0;
top: 0;
z-index: 10;
}
Then I styled the popup by fixing the position in the middle of the screen, and layered the popup on the very top using z-index.
body {
height: 100%;
margin: 0;
padding: 0;
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
background: url(body_bg.gif);
position: relative;
}
#hideshow {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.popup_block {
background: #ddd;
padding: 10px 20px;
border: 10px solid #fff;
float: left;
width: 480px;
position: fixed;
top: 20%;
left: 50%;
margin: 0 0 0 -250px;
z-index: 100;
}
.popup_block .popup {
float: left;
width: 100%;
background: #fff;
margin: 10px 0;
padding: 10px 0;
border: 1px solid #bbb;
}
Then added some additional touch ups for the styling of its content. I used a PNG file for my close button, check out my previous article on how to make PNG files work IE6.
.popup h3 {
margin: 0 0 20px;
padding: 5px 10px;
border-bottom: 1px solid #bbb;
font-size: 1.5em;
font-weight: normal;
}
.popup p {
padding: 5px 10px;
margin: 5px 0;
}
.popup img.cntrl {
position: absolute;
right: -20px;
top: -20px;
}
Fixed Positioning in IE6?
As we all know, IE6 does not understand fixed positioning. I did a little bit of research and found this great tutorial on how to make IE6 understand absolute positions.
*Note I used an IE6 Hack to get this done quickly. For those hard core validation ninjas, this IE 6 specific styles should be in its own style sheet within the conditional statement.
First, to fix the “fade” ID to the top left at all times:
*html #fade {
position: absolute;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop
: document.body.scrollTop);
}
Then to fix the popup in the center of the page:
*html .popup_block {
position: absolute;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop
+((documentElement.clientHeight-this.clientHeight)/2)
: document.body.scrollTop
+((document.body.clientHeight-this.clientHeight)/2));
left:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollLeft
+ (document.body.clientWidth /2 )
: document.body.scrollLeft
+ (document.body.offsetWidth /2 ));
}
Conclusion
Now, the only thing that I am not satisfied with is the fact that when using absolute positioning, the popup width and height cannot exceed the user’s monitor size. If it does, then we run into a usability issue, where they will not be able to see the entire popup no matter how hard they want to scroll. One thing that may help to work around this problem is to simply put an overflow: auto on the .popup class.
If anyone has a better strategy or suggestion, please let me know. I’m looking forward to making this even better with your help~
Resources
If you choose to just use the original lightview that I was trying to mimic, check out the demo, its pretty easy to get it going and I found it very useful.
Subscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.
Bookmark or Share this Post!
This entry was posted on Monday, December 22nd, 2008 at 11:07 am and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Popular Posts
Recent Comments
Thanks, very useful
I don’t understand how you centered the ‘lightview-box’ verticaly.
Hey this is pretty cool. Thanks for sharing.
Very nice. This is the first time I’ve seen this with javascripts.
Really nice to see this technique with CSS.
Monkeytail, check out this post for vertical alignment
http://www.sohtanaka.com/web-design/vertical-alignment-css/
Thanks for the feed back all, if anyone has improvement suggestions I’m definitely interested!!
Well done. I really like this, unfortuenatly I cannot help inprove because I don’t know enough. Is this free to use? What are the licence conditions?
Hey Jason~
My version CSS/JS is free to use. No licensing conditions. The real lightview by nick stakenburg does require licensing though, I would check it out at http://www.nickstakenburg.com/projects/lightview/
Thanks!
For CSS opacity I prefer to use this method:
background: rgba(0,0,0,0.85);
Just something else to play with
Very creative solution - although it lacks the fading in and out of JavaScript library based solutions such as Lightbox, Thickbox, etc, so I’d probably go with one of those solutions personally.
Also, in the demo, there seems to be a slight lag when redrawing the area where the popup appears (when I scroll up and down quickly).
Anyway, great work!
Hey there soh, I was very impressed to see that you have made this great functionality available with just a little javascript and some css.
However, I was looking through the demo code, and all the popups on that page use the same content. Looking at the script, css and html, it seems this approach doesn’t support having several popups with unique content on one page (at least not without one script per popup)?
Or am I reading the code wrong? If you can indeed have more than one unique popup using the same script and css, what is the “variable” that needs to be set/changed in the code for it to make the second and third popup work?
Thanks,
Jay
Hi. =)
I’ve managed the popup block to scroll with the rest of the page by setting ‘position: relative’ in the ‘popup_block’ class.
I’m completely novice in CSS so I don’t know the possible bugs it may cause.
I’d appreciate your comments.
Thank you for your code at all.
Regards,
Maurício
soh, thank you so much for this code. easy to use and looks great.
to Jay above,
I was able to get this to work with multiple forms on a single page. basically, instead of making the popup call like this:
javascript:showDiv();
supply the form name you want to show like this:
javascript:showDiv(’myform’);
Then in the javascript code change
function hideDiv() {
to
function hideDiv(formname) {
and
function showDiv() {
to
function showDiv(formname) {
From there, change all the ‘hideshow’ to ‘formname’
Works great.
text of popup becomes transparent in IE7 works well for Mozilla.
any suggestions
Shawn, big thanks to you for breaking that down!
Push, are you using the opacity property inside of the popup class?
Great demo you have here. I have a question though, I have a php contact form, when the user hits the submit button I would like the “thank you for your email” to pop up using your example here, I do not want the site to go to another page saying thank you. I have it all working except I can’t seem to get the php to echo the thank you inside your pop up window…do you have any suggestions on how I could get it to do so?
Wow, it’s really nice, thanks for sharing. I will return for more!
cool, realy looks good. Im very new to all this. Lets say I wannet to to this for an image gallery. How would i go about doing it for every image?
michelle - Sorry, I dont think I’m savvy enough with PHP to give you a break down of how that would work X-p Maybe someone here can help?
Herman - For an image gallery, I would suggest using the Lightview by Nick, he already has a pre-built snazzy image gallery effect. It would probably come out nicer and its easier to implement for that
great! yust were i was looking for! Thanks a lot!
Greetings,
R.
Trying to load multiple forms under two diff. names, one being “tania” and the other being “sunny.” It keeps loading “tania” under both links. Any suggestions?
Click Me
Click Me
Example
Test 1
function hideDiv(tania) {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(’hideshow’).style.visibility = ‘hidden’;
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = ‘hidden’;
}
else { // IE 4
document.all.hideshow.style.visibility = ‘hidden’;
}
}
}
function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(’hideshow’).style.visibility = ‘visible’;
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = ‘visible’;
}
else { // IE 4
document.all.hideshow.style.visibility = ‘visible’;
}
}
}
javascript:showDiv(’tania’)
javascript:showDiv(’sunny’)
Above is what I have, in my post earlier it showed links instead.
Thank you!
Sunny
OK, here is a more updated code that I am use now, but still not working:
Wanting to load multiple forms in the same page, “tania” and “sunny”
CSS CODE (replaced hideshow with the follwing):
#sunny {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#tania {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
My href links:
javascript:showDiv(’tania’)
javascript:showDiv(’sunny’)
Example
TANIA
Example
SUNNY
function hideDiv(tania) {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(’tania’).style.visibility = ‘hidden’;
}
else {
if (document.layers) { // Netscape 4
document.tania.visibility = ‘hidden’;
}
else { // IE 4
document.all.tania.style.visibility = ‘hidden’;
}
}
}
function showDiv(tania) {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(’tania’).style.visibility = ‘visible’;
}
else {
if (document.layers) { // Netscape 4
document.tania.visibility = ‘visible’;
}
else { // IE 4
document.all.tania.style.visibility = ‘visible’;
}
}
}
function hideDiv(sunny) {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(’sunny’).style.visibility = ‘hidden’;
}
else {
if (document.layers) { // Netscape 4
document.sunny.visibility = ‘hidden’;
}
else { // IE 4
document.all.sunny.style.visibility = ‘hidden’;
}
}
}
function showDiv(sunny) {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(’sunny’).style.visibility = ‘visible’;
}
else {
if (document.layers) { // Netscape 4
document.sunny.visibility = ‘visible’;
}
else { // IE 4
document.all.sunny.style.visibility = ‘visible’;
}
}
}
uhh … This didnt work AT ALL.
Great tutorial, Thx
Question, you have for download you own version of lighview?
ur script helped me a lot.
thanks for sharing..
Great…
Hi Soh! Thanks for your nice job. May be you know or may be not the load effect of LightWindow. And it’s free :D!
Best wishes
The code looks and works good, but. Is there an easy way to use more then one popup per page?
Dear Sir, it is very good. I like your site. I also use this CSS light view popup in my project. But, I have some problem. When I try to use Microsoft Ajax Extender 1.0 (for .NET 2.0), once I drop the scriptmanager control to my page, visual studio compiler show errors on your CSS class. What’s wrong! I don’t know. I am very poor in CSS and Javascript. If I remove scriptmanager control, your lightview CSS is ok. How should I fix this one. Thanks.
Best Regards
Zin
Hi Soh,
This example is really great!!!!! and i am surely going to use this in my next project. I have just a few concerns here.
1. The demo looks ok in IE 6 but it6 flickers a bit when we scroll the page
2. In Opera, the pop-up appears after the centre of page which hides a part of pop-up from bottom
In FF it looks ok… Is there any way to move the pop-up freely on screen?