My page takes quite sometime to load a variety of controls and menu images. I want to show a popup window with progress bar on it. The user must not be able to access the original page on the web-browser when this popup is showing.
When the page has loaded completely, this popup must disappear. How to do this?
The easiest way to do this would be with an overlay -- an absolutely-positioned <div> that covers the entire page and has a high z-index. Once your page has finished loading (i.e. the loaded event fires) then you can remove the <div>.
A rough example for styling purposes:
<html>
<head>
<style type=text/css>
#loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.7; }
#loading-message { position: absolute; width: 400px; height: 100px; line-height: 100px; background-color: #fff; text-align: center; font-size: 1.2em; left: 50%; top: 50%; margin-left: -200px; margin-top: -50px; }
</style>
</head>
<body>
<div id=loading-overlay></div>
<div id=loading-message>Loading page, please wait...</div>
<!-- rest of page -->
<p>The rest of the page goes here...</p>
</body>
</html>
Be aware that controls may have their own loaded event (e.g. <img> tags do), which may fire after the page has completely finished. You would have to experiment to be certain.
