<div>
&lt;div id=&quot;loadingContainer&quot;&gt;<br />
&nbsp; &nbsp; &lt;!--[if lt IE 6.5]&gt;&lt;iframe&gt;&lt;/iframe&gt;&lt;![e<wbr />ndif]--&gt;<br />
&lt;/div&gt;<br />
<br />
<br />
#loadingContainer<br />
{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cursor: wait;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filter: alpha(opacity=50);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-opacity: .50;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: .50;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: silver;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100%;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100%;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index: 100;<br />
}
</div>


<div>
I suggest you look at the <a href="http://jqueryui.com/demos/dialog/" rel="ugc">jQuery UI dialog</a>. Takes away a lot of hassle with modal dialogs.
</div>


<div>
<div class="content wysiwyg-content">
Dear Experts!<br />
<br />
I want to make a div as a semi transparent layer (opacity 80%) on top of the whole body of the web page.<br />
<br />
How do I get the height and width of the window/body of the html page to set on the div?<br />
<br />
It needs to be a cross browser solution.<br />
<br />
Thank you<br />
<br />
Regards
</div>
</div>


Dear Experts!

I want to make a div as a semi transparent layer (opacity 80%) on top of the whole body of the web page.

How do I get the height and width of the window/body of the html page to set on the div?

It needs to be a cross browser solution.

Thank you

Regards

&lt;div id=&quot;loadingContainer&quot;&gt;
    &lt;!--[if lt IE 6.5]&gt;&lt;iframe&gt;&lt;/iframe&gt;&lt;![endif]--&gt;
&lt;/div&gt;


#loadingContainer
{
	cursor: wait;
	text-align: center;
	position: absolute;
	filter: alpha(opacity=50);
	-moz-opacity: .50;
	opacity: .50;
	background-color: silver;
	width: 100%;
	height: 100%;
	z-index: 100;
}

I suggest you look at the jQuery UI dialog (http://jqueryui.com/demos/dialog/). Takes away a lot of hassle with modal dialogs.

How to get window height and width within all major browsers?

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

JavaScript

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.