[jQuery] The CSS behind overlays
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
{mso-style-priority:34;
margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:36.0pt;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
span.E-MailFormatvorlage17
{mso-style-type:personal-compose;
font-family:"Calibri","sans-serif";
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:612.0pt 792.0pt;
margin:70.85pt 70.85pt 2.0cm 70.85pt;}
div.Section1
{page:Section1;}
/* List Definitions */
@list l0
{mso-list-id:1475640612;
mso-list-type:hybrid;
mso-list-template-ids:1957452726 67567639 67567641 67567643 67567631 67567641 67567643 67567631 67567641 67567643;}
@list l0:level1
{mso-level-number-format:alpha-lower;
mso-level-text:"%1\)";
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
ol
{margin-bottom:0cm;}
ul
{margin-bottom:0cm;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=DE link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal>Hi there,<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><span lang=EN-US>I hope there’s someone out there who
can help me with this little issue. I have to create an overlay that is _<i>not</i>_
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?<o:p></o:p></span>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span>
<p class=MsoNormal><span lang=EN-US>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:<o:p></o:p></span>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span>
<p class=MsoListParagraph style='text-indent:-18.0pt;mso-list:l0 level1 lfo1'><![if !supportLists]><span
lang=EN-US><span style='mso-list:Ignore'>a)<span style='font:7.0pt "Times New Roman"'>
</span></span></span><![endif]><span lang=EN-US>How can I stretch the overlay
background over the whole screen?<o:p></o:p></span>
<p class=MsoListParagraph style='text-indent:-18.0pt;mso-list:l0 level1 lfo1'><![if !supportLists]><span
lang=EN-US><span style='mso-list:Ignore'>b)<span style='font:7.0pt "Times New Roman"'>
</span></span></span><![endif]><span lang=EN-US>How can I make it alpha
transparent for _<i>all</i>_ browsers?<o:p></o:p></span>
<p class=MsoListParagraph style='text-indent:-18.0pt;mso-list:l0 level1 lfo1'><![if !supportLists]><span
lang=EN-US><span style='mso-list:Ignore'>c)<span style='font:7.0pt "Times New Roman"'>
</span></span></span><![endif]><span lang=EN-US>How can I vertically center the
content div that’s inside this background div?<o:p></o:p></span>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span>
<p class=MsoNormal><span lang=EN-US>I know the lightbox scripts do this by
using CSS, but how do the CSS rules have to look like in the result?<o:p></o:p></span>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span>
<p class=MsoNormal><span lang=EN-US>Thanks in advance,<o:p></o:p></span>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span>
<p class=MsoNormal><span lang=EN-US>Arne<o:p></o:p></span>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span>
<p class=MsoNormal><o:p> </o:p>
</div>
</body>
</html>