Lock any action on a page using JavaScript

Question

I am relatively new to JavaScript. I have developed an application with the Outsystems technology, where-in I present a pop-up to the user and once the user fills the information, the user clicks 'Save' button. Now I need to disable all the page contents as it takes a long time to save and in between that the user may click anything else.

So I need to lock the page using JavaScript, with a message that tells user to wait until the process finishes.(on-click of the 'Save' button)

Any hints ?

Thanks.

User [Overlay](http://answers.oreilly.com/topic/1823-adding-a-page-overlay-in-javascript/) — timidboy, Sep 03 '12 at 05:00

score 2 · Accepted Answer · answered Sep 03 '12 at 05:01

2

Simply add a full page fixed position overlay that says "Saving... Please wait." on it. You might even make it semi-transparent grey.

answered Sep 03 '12 at 05:01

PitaJ

12,969
6
36
55

score 1 · Answer 2 · answered Sep 03 '12 at 05:00

The absolutely dead-simple method would be a jQueryUI modal dialog. You can implement one with just a few lines of code, plus a little HTML markup and including the library:

$( "#dialog-modal" ).dialog({
        height: 140,
        modal: true
    });
});

However, you should take note: this, just like any other JavaScript solution, won't stop malicious users from interacting with your site when you don't want them to. The only true protection is to check all input from the user when it reaches your serverside code.

score 0 · Answer 3 · answered Sep 03 '12 at 05:00

0

You could disable all inputs using JavaScript:

(in this case jQuery)

$(':input').attr('disabled', 'disabled');

But likewise that would not stop the doing something in another tab, or navigating away from the page, or refreshing it.

answered Sep 03 '12 at 05:00

Petah

45,477
28
157
213

This makes no provision for elements that were already disabled - to wit, there's no way to reverse it without enabling everything. – Winfield Trail Sep 03 '12 at 05:27
@sudowned that is beyond the scope of the question, no? – Petah Sep 03 '12 at 08:17
I disagree on the grounds that it is destructive to the form's state. This directly impacts the usefulness of the solution. – Winfield Trail Sep 03 '12 at 18:08

McGarnagle · Answer 4 · 2012-09-03T05:12:27.657

0

You can do something very simple, like apply a transparent div over the top of your page. Say like this:

var overlay = $("<div style='width:100%; height: 100%; top: 0; z-index: 100; position: absolute; background: lightgray; opacity: 0.5; text-align: center; font-size: large; padding-top: 25%; font-weight: bold;'>Loading...</div>");
$("body").append(overlay);

edited Sep 03 '12 at 05:12

answered Sep 03 '12 at 05:00

McGarnagle

101,349
31
229
260

Danil Speransky · Answer 5 · 2012-09-03T05:21:06.453

0

If you use jQuery (demo):

CSS:

.overlay {
    position: absolute; 
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    z-index: 999;
    background-color: #000;

    font-size: 24px;
    font-family: sans-serif;
    color: white;
    text-align: center;
}

JavaScript:

$('<div>in process...</div>')
    .addClass('overlay')
    .fadeTo(0, 0.4)
    .appendTo('body');

edited Sep 03 '12 at 05:21

answered Sep 03 '12 at 05:11

Danil Speransky

29,891
5
68
79

Lock any action on a page using JavaScript

5 Answers5