How to make background (out of popup) inactive in jQuery UI, when popup appears?

There is a nice pop-up (dialog) in jQuery UI. It is easy to implement and control. The dialog window can be moved, resized and closed with the 'x' icon. 

There is a small example below;

***************************
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful<br/> for displaying information.</p></div>----------------------------------------
var commDialog = $("#dialog").dialog({ autoOpen : false, resizable : false, height : 520, width : 550, show : { effect : "fade", duration : 1000 }, hide : { effect : "fade", duration : 500 } });

commDialog.dialog('open');
commDialog.dialog('close');
***************************

*** Sometimes, when a pop-up appears, an user is forced not to use any other element out of pop-up element. It can be provided with disabling background behind the pop-up. There are two solution to disable background.

a) First solution is classic masking;

***************************
<div class="mask"></div>
----------------------------------------
.dialog {
position:absolute; z-index: 1; }

.mask { position: fixed; top: 0; left: 0; background: #000; opacity: 0.8; z-index: 2; height: 100%; width: 100%; }
----------------------------------------
$(".mask").fadeIn('slow');
$(".mask").fadeOut('slow');
***************************

b) Second is gained by using a property of JQuery UI Dialog;
 >> Related property is "modal". When "modal" is true, it means that masking is supplied on the background.

***************************
var commDialog = $("#dialog").dialog({
autoOpen : false, resizable : false, modal: true, height : 520, width : 550, show : { effect : "fade", duration : 1000 }, hide : { effect : "fade", duration : 500 } });
***************************