input box remains visible behind jquertyui dialog - html

Question

I used jqueryui dialog . There are input boxes in the page. When the dialog appears on clicking a link, then the input boxes are visible from behind the dialog body resulting into bad visibility of the dialog body text etc.
$(function() {
$( "#dialog" ).dialog();
});
HTML:
<input type="text" value="" class="input_box" />
<input type="text" value="" class="input_box" /><input type="text" value="3" class="input_box" />
<input type="text" value="" class="input_box" /><input type="text" value="3" class="input_box" />
<input type="text" value="" class="input_box" /><input type="text" value="3" class="input_box" />
<input type="text" value="" class="input_box" /><input type="text" value="3" class="input_box" />
<input type="text" value="" class="input_box" /><input type="text" value="3" class="input_box" />
<input type="text" value="" class="input_box" /><input type="text" value="3" class="input_box" />
<input type="text" value="" class="input_box" />
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
How to refrain the input boxes from distorting the modal window body part?

Answer 1

If you specify modal:true the background will be grayed out.
$(function() { $( "#dialog" ).dialog({modal:true}); });
If you want the entire background to be hidden you can change the overlay to a solid color using CSS:
.ui-widget-overlay{
background: gray;
opacity: 1;
}
JSFiddle: http://jsfiddle.net/WBstB/1/