How do lock the website while a page loads ?

Hi all,

I'm looking for a tool which would lock my web page while it's loading.

For example, let's say I have a left menu with some links. Whenever I click on one of them, a div (or anything else like an image and some text saying "loading...") pops up in the middle of the screen and the rest the page becomes unclickable with a soft gray background over the whole website.

In case you don't get what I mean, here's an example:
The Plesk Control Panel does exactly what I want. Does anybody have an idea how it's done please ?

Thanks in advance !
Who is Participating?
ZvonkoConnect With a Mentor Systems architectCommented:
They lock the page by an overly of iframe loaderSubLayer and a table loaderContainer.

You can see that by using PageSpy: http:/M_1344026.html

beatboxradioAuthor Commented:
Sorry but that doesn't seem to be what I want. Any other suggestion ?

The best would be one similar to Plesk's lock & load system.

Thanks !
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

ZvonkoSystems architectCommented:
The question was answered. Now it request delete without any feedback?
beatboxradioAuthor Commented:
You might want to take a look at the link I've been given please ?
If you bothered reading it you'd notice it's really not what I was looking for.

I'm sorry but no points will be given since I found the solution on my own.
ZvonkoSystems architectCommented:
There is nothing to discuss and nothing to solve. The question was: "Does anybody have an idea how it's done please ?"
My answer is: "They lock the page by an overly of iframe loaderSubLayer and a table loaderContainer."

You want to say I do not have an idea how it's done please???

beatboxradioAuthor Commented:
Well, sacabonos2k6's solution really  did not help as it is explained how to display a progress bar (which is totally not what I need) on a page using ActiveXObject or .NET. I am developping in PHP and I don't use any of the technologies mentionned in that website.

As for Zvonko's solution, I am not using iFrames for my application so it didn't help me either. Moreover, his link pointed to his profil page where I was supposed to download and install a software to understand a possible solution I didn't need in the first place.

That sumarizes why none of the solution I've been given helped me.

As for how I did it, it's pretty simple:
I used javascript to display a 100% width by 100% height div with 80% opacity when my AJAX computation starts, and then hide it when it's done.
Force accepted.
Community Support Moderator
ZvonkoSystems architectCommented:
Thanks bol, in the future I will take care to give more credit to Expert devic and his really great PageSpy.
Take you for your care and your great housekeeping work.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.