javascript pop up and block screen

Question

I have a div pop up window which appears on button click event. I want to disable the screen when the pop up is shown to the user and enable again when user closes the pop up by escape key or close button on div, like a regular dialog box. How can I do this by java script.

Answer 1

You can create a "cover" element that covers the screen preventing input from the user, except with whatever is on top (or inside) the cover.

$('#button').click(function() { $('body').append('<div class="cover"></div>'); } );

.cover { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); }

You then assign events to the cover so when the user clicks it or presses a specific key, the cover is hidden.

$('.cover').click(function() { $(this).hide(); });

I highly recommend using a modal plugin/script, as doing it yourself requires significant effort and is time consuming (trust me).

Answer 2

JQuery UI makes your life easier. Have a look at jquery UI dialog

Answer 3

You can use jQuery dialog and use the attribute modal:true

$("#fileuploadfun").dialog({ modal: true });  

If you use modal:false then you can click on background