HTML Div overlays

Question

Hello to all,

I want a code for html overlays like thickbox, that is worked in all browsers.

can u please tell the related urls or something else...

regards KK

Answer 1

There are tons of *box scripts around. I'm sure none of them works in all browsers that exist, but most of the mainstream solutions like Thickbox itself should behave well in all major browsers which is the best you can ask for.

Check out these lists:

• Thinking Outside The LightBox – TOP 10 PICKS
• 30 Scripts For Galleries, Slideshows and Lightboxes at Smashing magazine

for anything more specific, you would have to go into more detail.

Answer 2

I made my own lightboxing stuff and here is what I'm using that is working back to IE6 for sure. You just make a div and append it directly to the body. You need to make a png image that is translucent to use as your background.

html, body{height:100%;}

#lightbox_darkLayer{
    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    _top: expression(((ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); 
    _left: expression(((ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');
    width: 100%;
    height: 100%;
    background:url(/images/overlayBg.png) repeat;
    z-index:1001;
    _filter: alpha(opacity=70);/*This is for IE6 who won't support a translucent png as a bg image*/
}

The css properties prefixed with underscores are for IE. You could do this cleaner by adding some CSS to IE specifically using their html comment if check thing.