i suggest you take a look at the css file included with thickbox :
/*
----------------------------------------------------------------------------
------------------------------------*/
/* ---------->>> global settings needed for thickbox
<<<-----------------------------------------------------------*/
/*
----------------------------------------------------------------------------
------------------------------------*/
*{padding: 0; margin: 0;}
/*
----------------------------------------------------------------------------
------------------------------------*/
/* ---------->>> thickbox specific link and font settings
<<<------------------------------------------------------*/
/*
----------------------------------------------------------------------------
------------------------------------*/
#TB_window {
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
}
#TB_secondLine {
font: 10px Arial, Helvetica, sans-serif;
color:#666666;
}
#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
/*
----------------------------------------------------------------------------
------------------------------------*/
/* ---------->>> thickbox settings
<<<-------------------------------------------------------------------------
----*/
/*
----------------------------------------------------------------------------
------------------------------------*/
#TB_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
height:100%;
width:100%;
}
* html #TB_overlay { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight >
document.body.offsetHeight ? document.body.scrollHeight :
document.body.offsetHeight + 'px');
}
#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
top:50%;
left:50%;
}
* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin
= document.documentElement && document.documentElement.scrollTop ||
document.body.scrollTop) + 'px');
}
#TB_window img#TB_Image {
display:block;
margin: 15px 0 0 15px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #666;
border-left: 1px solid #666;
}
#TB_caption{
height:25px;
padding:7px 30px 10px 25px;
float:left;
}
#TB_closeWindow{
height:25px;
padding:11px 25px 10px 0;
float:right;
}
#TB_closeAjaxWindow{
padding:7px 10px 5px 0;
margin-bottom:1px;
text-align:right;
float:right;
}
#TB_ajaxWindowTitle{
float:left;
padding:7px 0 5px 10px;
margin-bottom:1px;
}
#TB_title{
background-color:#e8e8e8;
height:27px;
}
#TB_ajaxContent{
clear:both;
padding:2px 15px 15px 15px;
overflow:auto;
text-align:left;
line-height:1.4em;
}
#TB_ajaxContent.TB_modal{
padding:15px;
}
#TB_ajaxContent p{
padding:5px 0px 5px 0px;
}
#TB_load{
position: fixed;
display:none;
height:13px;
width:208px;
z-index:103;
top: 50%;
left: 50%;
margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}
* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin
= document.documentElement && document.documentElement.scrollTop ||
document.body.scrollTop) + 'px');
}
#TB_HideSelect{
z-index:99;
position:fixed;
top: 0;
left: 0;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
height:100%;
width:100%;
}
* html #TB_HideSelect { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight >
document.body.offsetHeight ? document.body.scrollHeight :
document.body.offsetHeight + 'px');
}
#TB_iframeContent{
clear:both;
border:none;
margin-bottom:-1px;
margin-top:1px;
_margin-bottom:1px;
}
as for the html generated by thickbox. I think the width/height values are
calculated according to the screen size.
<iframe style="height: 856px; width: 1680px;" id="TB_HideSelect"></iframe>
<div style="height: 856px; width: 1680px;" id="TB_overlay"></div>
<div style="width: 1504px; left: 84px; top: 4.195px; display: block;"
id="TB_window" class="draggable">
<div id="TB_title"><div id="TB_ajaxWindowTitle">WINDOW CAPTION</div>
<div id="TB_closeAjaxWindow"><a href="#" id="TB_closeWindowButton"
title="Close">close</a></div>
</div>
<iframe hspace="0" src="pageToDisplay.html" id="TB_iframeContent"
name="TB_iframeContent" style="width: 1503px; height: 794.61px;"
onload="TB_showIframe()" frameborder="0"></iframe>
_____
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Arne-Kolja Bachstein
Sent: samedi 9 juin 2007 18:08
To: jquery-en@googlegroups.com
Subject: [jQuery] The CSS behind overlays
Hi there,
I hope there’s someone out there who can help me with this little issue. I
have to create an overlay that is _not_ called using JS, but can be clicked
away using JS. The JS thing now isn’t a problem, I simple hide it on click
using jQuery, since I already use jQuery at an other part of this web site.
But I now need the CSS to style the overlay like it is styled when using the
usual lightbox scripts and so on. Do you know how it should look like?
I am using two divs: one for the overlay background for dimming the site and
one div that’s within this background div, containing the content. Now my
problems are:
a) How can I stretch the overlay background over the whole screen?
b) How can I make it alpha transparent for _all_ browsers?
c) How can I vertically center the content div that’s inside this
background div?
I know the lightbox scripts do this by using CSS, but how do the CSS rules
have to look like in the result?
Thanks in advance,
Arne
Ce message Envoi est certifié sans virus connu.
Analyse effectuée par AVG.
Version: 7.5.472 / Base de données virus: 269.8.13/840 - Date: 8/06/2007
15:15
