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.
Similar Posts:
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
!
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?
Is it possible to embed a swf file in this? Thanks!
Yes you can, but for swf files, I would also suggest checking out other plugins that has more effects similar to this~
I am allready working on this project and i’ve made somme modif..
to your code if you want i can send it to you by email with attachment
in a zip file it is a photo album it proove that we can do anything with it
Sorry for my english i am french and i dont have much pratice in the language
Waiting for you’r answer
BigDan from ST-Eustache quebec
WOW!! this made my work easier..thanks a lot for sharing..
Hey It is exactly what I was looking for. Its very nice and creative solution like lightbox. Thanks a lot.
This is exactly what I am looking for on a site I’m building, however I have several instances needed but can’t work out how to have multiples with different info displaying in them.
I have duplicated it, changing the CSS names adding _2 at the end but when I click a new link in the browser it always displays the original pop up.
Is this because of the JavaScript?
Is there a way to have different content in different pop ups on one page?
Many thanks,
Will
Does anyone know how I can make it have mulitple forms on one page?
Nice. Thank you for the tutorial.
One question though… Do you have a list of ‘tested’ browsers?
That is, what browsers does this work on?
Thank you,
Greg
but IE6 getting white space at bottom
nice, very useful
I ve question to anyone who knows about javascript
how can i load hidden div in 5 sec without clicking?
thanks
Hi, this looks great, but unfortunately the fade does not appear to work in IE6 for me. It shows at the top right, but does not stretch across the entire browser window.
I have the IE hack in a separate stylesheet and within its own condition.
Not sure why it does not work?? Any ideas anyone?
Thanks
Hi there, after a bit of research I have solved the problem. I had to use the following to get the fade id to work in IE6.
#fade {
width: expression(document.body.clientWidth);
height: expression(document.documentElement.clientHeight);
left: expression( ( ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + ‘px’ );
top: expression( ( ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + ‘px’ );
}
looks great, but if you have a youtube video in the box, the audio does not stop playing when you click on the ‘X’
the demo is really great, but what the problem is, when you use the html select option in your page, the select box comes forward, and the pop-up div goes back, i use all kind of z-index stuffs.
yes selva you are correct, i also got the same problem.
The code is great, but how it works if you have pop ups with different content.
Very nice css popup however I am looking for same solution as to have separate content for different popups?
This is a great script. I was looking a lot of places for one, and this is clearly the best. I was wondering if any has figured out how to make multiple hidden popups yet. On our site we have around 60 profiles of our members, and I thought this would be a great way to display those. Again, awesome job!
Thanks, for sharing. Looks real stylish!
Hi….Its very nice PopUp script.Please help me out anyone how to make stretchble the popup across the window.
what a wonderful great tutorial! thank you. say, was wondering if this can be apply to multiple image to be view in css pop up cause that’s a lot of to add for 30 image links.. kindly let me know. thanks and have a great day people
Is there a way i can make the pop up load automatically when someone visits my page?
Hi,
Great script. I like it a lot. However, as some other people in earlier posts, I wonder how I can modify the script to be able to run different pop-ups from different links, all on the same page.
I’ve tried to play around with IDs etc, but can’t get it to work. I’m not big with javascripts and such so I would appreciate some helpful comments and suggestions.
Thanks,
Dz
Never mind folks. Problem solved.
Danzig,
How did you modify the script to get pop-ups from different links, all on the same page?
Td
Would to get in line for some help on calling multiple/different pop-ups. I’ve tried every conceivable option (I think) and it’s not working so hot… Danzig?
Great script, but i have i slight problem. When I don’t fulfil the field and I press the Submit button, the lightbox close (wrong
), when I again click the link button, lightbox open but with error (please fill the field). Is there any way to fix that? I wan’t when you click the Submit button with unfilfiled field that wrote Please fill, no closing and that.
Please for some help.
Sorry for my bad English.
Really helpful post, thank you much!
Hi Soh,
Thanks for the wonderful script. I had run into a peculiar problem in IE 7, that the opacity did not work at all. The background page was filled with the background color. I do agree this css worked out of the box as it is.
I did a few modifications on my own, as it has to work inside another asp. I am wondering is it because of the another css that I have to use to keep the look and feel uniform?
Do let me know, if you would like to take a look at the code.
Thanks
Nanda
Could someone share how you can get multiple (but different) popups on the same page? I’m sure it would benefit alot of people! THANKS
How to do this on Page Onload instead of Onclick ?
How to disable all the html form fields like drop downs, checkboxes in the base parent window when popup opens.
I tried using this on multiple images on one page – passing the imageID – and it doesn’t work – has anyone solved working on more than one thing on a a page?
Nvm – solved it – it’s the CSS – because it works on #hideshow
you have to change it dynamically – arg – not sure how
Finally, how to use this in multiple popup on one page :
CSS
no changes
————————————————————————————
HTML :: add more links as you need; only change number inside link & popup
Donec non enim
Example of Styling CSS Popups
————————————————————————————
Javascript
function hideDiv(id) {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.visibility = ‘hidden’;
}
else {
if (document.layers) { // Netscape 4
document.id.visibility = ‘hidden’;
}
else { // IE 4
document.all.id.style.visibility = ‘hidden’;
}
}
}
function showDiv(id) {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.visibility = ‘visible’;
}
else {
if (document.layers) { // Netscape 4
document.id.visibility = ‘visible’;
}
else { // IE 4
document.all.id.style.visibility = ‘visible’;
}
}
}
————————————————————————————
<a href="javascript:showDiv(1)">Donec non enim</a>
<div id="hideshow"style="visibility:hidden;" >
<div id="1" style="visibility:hidden;">
<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<a href="javascript:hideDiv(1)">
<img src="icon_close.png" class="cntrl" title="Close" /></a>
<h3>Example of Styling CSS Popups</h3>
</div>
</div>
</div>
Finally, how to use this in multiple popup on one page :
CSS
no changes
————————————————————————————
HTML :: add more links as you need; only change number inside link & popup
<a href="javascript:showDiv(1)">Donec non enim</a>
<div id="hideshow"style="visibility:hidden;" >
<div id="1" style="visibility:hidden;">
<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<a href="javascript:hideDiv(1)">
<img src="icon_close.png" class="cntrl" title="Close" /></a>
<h3>Example of Styling CSS Popups</h3>
</div>
</div>
</div>
————————————————————————————
Javascript
function hideDiv(id) {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.visibility = ‘hidden’;
}
else {
if (document.layers) { // Netscape 4
document.id.visibility = ‘hidden’;
}
else { // IE 4
document.all.id.style.visibility = ‘hidden’;
}
}
}
function showDiv(id) {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.visibility = ‘visible’;
}
else {
if (document.layers) { // Netscape 4
document.id.visibility = ‘visible’;
}
else { // IE 4
document.all.id.style.visibility = ‘visible’;
}
}
}
————————————————————————————
Awesome. Thanks for this great tip!
Great stuff – this has saved me a lot of time and trouble. Many thanks.
Nice script!
I’m kinda newbie in this thing. Is it possible to open an image as a popup so that it would be resized suitable for the screen? If yes, then how?
I also tried to place an image 800*500px in the middle of the window, but usually it’s right side was out of the screen. But never centered. I took original script and replaced and lines (text) in html with image. What should I change?
Image placement solved.
Excellent tutorial and job! Saved me a lot !
Thank you!
I got this to work, however all of the text in the popup, including headings, seems to center on page
Cant figure it out
nevermind, took me 2 hours to finally post for help, then i finally found i had a text align center hidden in code
thanks for your contribution!
Any chance anyone knows how to add a scroll bar to this nifty little pop up? I’ve failed after about 5 days of attempts.
So whose feelin lucky?? Great scriptage though! Thanks Soh!
Thank you, you are and your code is wonderful but hasnt this page any download link or download archive.
I am editing now demo page
I say, thank you man.
Salah,
Still no luck with the multiple pop-ups. I followed your instructions precisely, but but no avail. Any chance you can post a live example?
Thanks!
Looks like some are still having trouble with multiple popups on a single page. I’d like to share the code I use that works for me. Also, thanks to the creator for the kind offering and beautiful work!
No changes to the CSS (unless you want to style it differently)
oops…
HTML Change:
<!–POPUP–>
<div id="hideshow" style="visibility:hidden;" >
<div id="1" style="visibility:hidden;">
<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<a href="javascript:hideDiv(1)">
<img src="images/icon_close.png" class="cntrl" title="Close" /></a>
<h3>Popup Number 1</h3>
<p>Test</p>
</div>
</div>
</div>
</div>
<div id="hideshow" style="visibility:hidden;" >
<div id="2" style="visibility:hidden;">
<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<a href="javascript:hideDiv(2)">
<img src="images/icon_close.png" class="cntrl" title="Close" /></a>
<h3>Popup Number 2</h3>
<p>Test</p>
</div>
</div>
</div>
</div>
Javascript Change:
<script language=javascript type='text/javascript'>
function hideDiv(id) {
if (document.getElementById(id)) { // DOM3 = IE5, NS6
document.getElementById(id).style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.getElementById(id).visibility = 'hidden';
}
else { // IE 4
document.all.getElementById(id).style.visibility = 'hidden';
}
}
}
function showDiv(id) {
if (document.getElementById(id)) { // DOM3 = IE5, NS6
document.getElementById(id).style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.getElementById(id).visibility = 'visible';
}
else { // IE 4
document.all.getElementById(id).style.visibility = 'visible';
}
}
}
</script>
Had trouble posting the rest…
Entire code for multiple popups on one page is available on my blog at http://stateofidleness.com/?p=344