Geek Answers Handbook

Lock the screen with a popup until the time page loads completely

My page takes quite a while to load various controls and menu images. I want to show a popup with a progress bar. The user should not have access to the original page in a web browser when this popup is displayed.

When the page is fully loaded, this popup should disappear. How to do it?

+5
source share
3 answers

The easiest way to do this would be with an overlay - absolutely positioned <div>, which covers the entire page and is tall z-index. Once your page finishes loading (i.e. an event occurs loaded), you can delete <div>.

An example stylization example:

<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>

Keep in mind that controls can have their own “loaded” event (for example, tags <img>) that can fire after the completion of a full page. You have to experiment to be sure.

+9
source

This is a regular application that I used in one of my custom cloud applications: NGEN preset screen

Viewing the source for the body.onload action ...

...

+2

You can have a div that covers the entire screen and hide this element in the window.load handler, but I agree with the comment above. Do not do this for your users.

+1
source

More articles:


All Articles