How to make jQuery dialog modal?

I am using jQuery dialog in asp.net. It is working fine for me. The problem is when I open the dialog box, I can still work parent page functionality. I don’t want that. Just dialog to modal and should not allow focus on parent page.

window.onload = function onloadFunction() {

        //setup edit person dialog
     $('#uploadPic').dialog({
             autoOpen: false,
             draggable: true,
             title: "Upload Picture",
             open: function(type, data) {
                 $(this).parent().appendTo("form");
             }
         });
     }

Is there any way to make it modal? Or if lost focus on dialog box close it automatically?

Please help me out.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Use

$('#uploadPic').dialog({
         autoOpen: false,
         modal: true,
         draggable: true,
         title: "Upload Picture",
         open: function(type, data) {
             $(this).parent().appendTo("form");
         }
     });
 }

I have just added the modal option to your sample.

Method 2

Read the documentation of JQuery Ui Dialog in: http://docs.jquery.com/UI/Dialog

Exist a Option called Modal, here is some samples from doc:

Initialize a dialog with the modal option specified.

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

Get or set the modal option, after init.

//getter
var modal = $( ".selector" ).dialog( "option", "modal" );
//setter
$( ".selector" ).dialog( "option", "modal", true );

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0