I just tried it out and there is a noticeable delay from when the box appears to when the overlay appears. You might want to preload the overlay image or switch to an opacity only solution.

Also, why is the overlay image 101×101? Sure, being 1×1 isn’t that big of a difference, but it would help with the load speed and save bandwidth over a long period of time.

Yes.

I knew there was an easier [lightweight] way—I’d actually attempted a similar result last summer with my personal blog and realized it was probably too much work to be worth it.

Thanks for doing the work. ;)

Very nice indeed.

Nice one. Gotta try that one.

Sorry for multiple comments. As Gerald mentioned, the comment form didnt clear in FF 1.5.0.1

Awesome. I thought the lightbox code was a little too heavy.

Adding the rel=”lightbox” would have added more complexity and code to the solution. Don’t get me wrong, that is particularly useful when you want the effect working with multiple images on the page, but it’s a bit overkill for my purposes.

As far as why the form isn’t clearing the fields after you click submit, that’s a good question. I’ll see if I can fix that this morning.

This is a killer effect. ManiacalRage.net uses it when he puts image links in posts, like on this post: http://maniacalrage.net/past/tags/japan/

Beautiful.

Does anyone now why I would be getting the javascript error “Element.show is not a function”?

My fault Chris. Element.show is a Prototype function. To remove that dependency, you just need to use the normal DOM method of making the div visible.

Thanks,

It works just great after I added the latest version (1.4) of Prototype

Glad to hear it. I think I also have the comment issues sorted out.

Great script, PJ. I played around with it and made some improvements (at least, they’re improvements for me).

Check out my version of Lightbox.js

It abstracts your functions into a Lightbox object, and allows for some customizations. Also lets you place more than one on a page. Hope it’s useful!

Way cool, PJ and Chris!

Tristan: The size of the image file actually doesn’t depend much on the physical size when the image consists only of one color. Actually using one pixel background images is often discouraged because many browsers go nuts when repeating an image over a million times.

There is some trickiness if you have a long scrolling content no? height:100% wouldn’t cover the entire page.

The CSS height attribute will only return the visible screen height, so 100% works just fine on long scrolling content.

cool

Good Work!! When i got the example??

this is excatly what I need but I cannot get it to work, gives me errors

PJ Hyatt said: “Element.show is a Prototype function. To remove that dependency, you just need to use the normal DOM method of making the div visible.”

Does anyone here speaken ze English? What’s that mean exactly? :)

(Have the latest prototype and Firebug shows the same error Chris rec’d.)

download link would be nice….

The ‘download’ is in the code box up there. ;)

asdf

I think it’s a great way to slim down the code. Thanks!

nice script, tnx u i m going to try it for my blog (:

154 errors this page, I’m thinking I’ll skip this one.

Replace ’&’ in the following code with ‘&’ and < with ‘<’ and the code should work.

That was supposed to be ‘&_amp;’ and ‘&_lt;’ (delete underscores.)

That looks cool

qq 75678886

really nice. tnx a lot

Hi have you seen this: http://orangoo.com/labs/GreyBox/ you may find it does what you are looking for Al :)

ghj

thanks fot it ;)

Привет!!!

Instead of using a gif for the background, you can use css’s built in opacity property, opacity.

Awesome, been working on trying to get a nice over lay. Once I was using was fine in all browsers except FireFox, weird scrolling ‘stuff’ and I do use the prototype,love that file! One thing I noticed about the demo, the box. it is appearign underneath the overlay. Maybe intentional, but assumed is was a dialog to appear over the overlay while the overlay was over the page. CSS is missing a couple attributes.

position: absolute; z-index: 91;

box{

position: absolute; z-index: 91; width:300px; background:#2d2d2d; padding:10px; border:2px solid #eee; }

I also agree with below a 1×1 pixel file works better.

/****************************************\
* Show Overlay and box
\****************************************/
function showBox(){
    $('overlay').show();
    overlayReload();
    center('box', '300', '100');// Size of the box
    return false;
}
/****************************************\
* Adjust overlay to new window size
\****************************************/
function overlayReload()
{
    if (window.innerHeight && window.scrollMaxY || window.innerWidth && window.scrollMaxX) {    
        yScroll = window.innerHeight + window.scrollMaxY;
        xScroll = window.innerWidth + window.scrollMaxX;
        var deff = document.documentElement;
        var wff = (deff&&deff.clientWidth) || document.body.clientWidth || window.innerWidth || self.innerWidth;
        var hff = (deff&&deff.clientHeight) || document.body.clientHeight || window.innerHeight || self.innerHeight;
        xScroll -= (window.innerWidth - wff);
        yScroll -= (window.innerHeight - hff);
    } else if (document.body.scrollHeight > document.body.offsetHeight || document.body.scrollWidth > document.body.offsetWidth){ // all but Explorer Mac
        yScroll = document.body.scrollHeight;
        xScroll = document.body.scrollWidth;
    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
        yScroll = document.body.offsetHeight;
        xScroll = document.body.offsetWidth;
      }

    $('page_overlay').style.height = yScroll;
    $('page_overlay').style.width = xScroll;
}
/****************************************\
* Actually center box
\****************************************/
function center(window_name, _width, _height) {
    var successWin = $(window_name);
    var pagesize = getPageSize();    
    var arrayPageScroll = getPageScrollTop();
    successWin.style.left = (arrayPageScroll[0] + (pagesize[0] - _width)/2);
    successWin.style.top = (arrayPageScroll[1] + (pagesize[1] - _height)/3);
}
/****************************************\
*
\****************************************/
function getPageSize(){
    var de = document.documentElement;
    var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
    var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight
    arrayPageSize = new Array(w,h) 
    return arrayPageSize;
}
/****************************************\
*
\****************************************/
function getPageScrollTop(){
    var yScrolltop;
    var xScrollleft;
    if (self.pageYOffset || self.pageXOffset) {
        yScrolltop = self.pageYOffset;
        xScrollleft = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop || document.documentElement.scrollLeft ){     // Explorer 6 Strict
        yScrolltop = document.documentElement.scrollTop;
        xScrollleft = document.documentElement.scrollLeft;
    } else if (document.body) {// all other Explorers
        yScrolltop = document.body.scrollTop;
        xScrollleft = document.body.scrollLeft;
    }
    arrayPageScroll = new Array(xScrollleft,yScrolltop) 
    return arrayPageScroll;
}

#page_overlay {
    position: absolute;
    z-index:80;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color:#000;
    filter:alpha(opacity=40);
    -moz-opacity: 0.4;
    opacity: 0.4;
}

Hey, dudes, can anyone post a zip with a working demo? All this copy-pasting business is error prone and am loosing hair!

I have to agree with z10d. It’s easier to avoid problems with a ZIP file. I can’t get it to work on my server and I’m going insane trying to figure out why.

This not work !!!! dont lost u time !!!

I have posted a zip of a working example here.

David Madden tnks dude, now it works !!! hehe

it doesnt work for me with IE6 :(

a.p.palaniraja – you must make some changes (look up)

This was exactly what I was looking for. Thanks for documenting it and posting it PJ.

Hi. I can’t seem to display the overlay in IE6.

A Sweet search engine, soon to have this feature.

Is there already a fix for the overlay problem in IE6? Coz the overlay color doesn’t show in IE6.

Ok, what files do i need? i cant find a download button…..

Thanks for this – awesome and easily modified to support multiple windows on the same page (although not at the same time obviously).

I also added onclick=”hideBox()” to the overlay window so that you can click anywhere outside of the window to close it (just like lightbox!). PS – to the guy that posted the Zip file – thanks, you made my life loads easier!

Finally this commentbox is fixed! The height part still doesnt work. Even if you look at PJ’s site that uses it, if you scroll down you see that anything below your original window height is not covered by the overlay. See here: http://www.wayfaring.com/

xzxz

Hello,

I just need some help. How do i put validation of the form? Pls help

Thank’s

555555555

deneme

Why don’t you just make a live example on this page? I personally can’t be bothered to download something and load it up in a browser just to see a little visual effect on a web page. Do a demo!

It didnt work with IE6

nice on mozilla firefox but got errors on IE, when is going to be a solid version??

Great work to all, thanks for the updates.

Great work to all, thanks for the updates.

Great work to all, thanks for the updates.

sdfsdfsdfsdfsdfsdfsdf

sdfsdfsdfsdfsdfsdfsdf

aaaaaaaaaaaaa

aaaaaaaaaaaaa

aaaaaaaaaaaaa

asas

asas

nvbnvbn

HOW TO USE IT WITH WORDPRESS!!!? PLEASE HELP.

niice

ghj

Excellent code. Easily implemented. Congrats and thanks for sharing :)

very nice article. thank you.

very nice article. thank you.

thank you!

excellent. thank you very much!

it’s good!

asd

Very very nice. Work very fine for my login/subscrite (of course I use the zip…). Continue your nice Web ajaxification.

sfasddf

superrr.

i was going to use this method, but i found moodalbox which uses the mootools library instead of the prototype.

Great Work! I was looking for this!

Good job! Like this one very much! Thanks for sharing!

werwer

Great Work! I was looking for this!

ไรฟ่ะ

hi, ive tried the lightbox effect in one of my project (as stated) i encountered lsight problems when it loads the lightbox effect, in IE it works fine but in Mozilla, there’s a little bit delay when the lightbox try to cover the parent page with flash animations and in safari its more complicated since the lightbox pop up doesn’t cover the whole page (specially the flash animations…) is there anyway you could help me out figuring the problem? the url is www.aklan.gov.ph… it also has a problem loading css formatting within the lightbox panel

This code rockssss

thanks.

thank you.

thanks.

very nice article. thank you.

thanks!

thanks.

very nice.

very nice article

thank you

thanks.

thank you

thanks.

PASSAPAROLA Yarışma Programı Başvuru Formu Başvuru Sitesi Doğruların Zamanı Yarışma Programı Başvuru Formu Varmısın Yokmusun Yarışma Programı Başvuru Formu Kim 1 Milyon İster Yarışma Programı Başvuru Formu Show tv Yarışma Programları yayın akışı canlı tv Acun Ilıcalı Reha Muhtar

thanks..

ajax is great! thanks :)

lm

very nice styles

good article

exelente articulo muchas gracias!!

tshirt imalat

tshirt

Forma imalat Forma imalat

Thanks.. good

sapka şapka imalat sapka şapka imalat

T-Shirt Sapka Forma Tshirt T shirt SIKIŞTIRMA Tişört Çanta Şemsiye Mutfak Önlüğü Yağmurluk Şapka

http://www.gelecegimiz.com/

http://www.ciceknet.net/

thnk you friend

thnk you friend

thnx

tnx

tnx

thnks

veryy cool thnks

tnx

special thnx

thnk you

where lightbox js?

thanks! lightbox

Hey, I love it.

Thank you.

Wowww!! it’s very important CSS technolgy.Thank you so much for sharing this article!

Thank you!!

Sorry, but can you make this in examples & put on in archive to download? I’ll be very greatful

çiçekçi

cicek

thanks

tasarımlarınız elimizden gecer

ÇANTA imalat Seyahat Bavul SIRT Bel Plaj Karton Kagit Poset CANTA Üretici

It won’t work for me. The error says “showBox is undefined”, but it finds errors within the script too, so I it must have found the file. Can anyone help?

cicek

Tekstil – Promosyon – Şapka – Yağmurluk – Atkı – Bere – Forma – İmalat – üretici – Ambalaj – Çanta Şapka imalat Tekstil imalat

çiçek cicek online cicekci

You need to run the Center routing on the overlay as well, otherwise the overlay only shows properly when you are scrolled at the top of the page.

sweet! i love it, its even better than Greybox…

SOMEBODY DO SOMETHING ABOUT THAT SPAMMER ABOVE!! http://www.pjhyett.com/ <<< you are a spammer.

sorry, my mistake, that’s the address of this website! please edit the above comment.

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

thanks

Thank you very much, you make great job

thanks

thanks

We try but this is not work!

Could you give me download link if it is possible.

Thanks. Nice script.

Thanks…. very nice script

how to validate form on submit?

Thanks nice script. Guzel script icin tesekkurler. gofrm google fan forum go-forum turkiye adresinde bu ve benzeri bir cok scripti gorebilirsiniz.

Thank. This is the best, from all i found. LG Martin

mice ajax tutorial, i really like it, and i’m tryng to folow the steps and implement it in my site.

nice tool,whant to try it.

This script is not new but its excellent and works very well. Just what I needed!

Nice job cleaning up the code and delivering a better version.

Nice job cleaning up the code and delivering a better version

Nice job cleaning up the code and delivering a better version.

Any working example or zip file with source code ?

kagıt poset plastik poset pvc poset etiket ajanda imalat karton poşet paper bags paper boxes manufacture

thanks

thanks

thanks

thanks

thanks

still nice to use! thanks!

still nice to use!

super is good

super is good

this is very very good . thank you

fdasfafasdfa

falakfalak

Thanks,Ill try to implement.

Very nice effect. But images preload is absent.

Thank for this

tanku you

tanku you

very cool thanks