Inputs not selectable in stacked modal Dialogs ?

Inputs not selectable in stacked modal Dialogs ?

When I open a Dialog on top of another Dialog, I cannot select/edit any input fields in the Dialog that is on top.

// 1st Dialog
var $reviewdialog = $('#userreviewform')
.dialog({
autoOpen:false,
modal: true,
resizable: false,
draggable: false,
show:"slide",
hide:"scale",
width:520,
// etc.










// Submit button in 1st Dialog opens 2nd Dialog

// 2nd Dialog
var $progressdialog = $('<div class="jqdialog"></div>')
.dialog({
modal: true,
resizable: false,
draggable: false,
// etc.










// When loading is finished, the 2nd Dialog is destroyed and a 3rd Dialog is opened
$progressdialog.dialog("close");
$progressdialog.dialog("destroy"); 

// 3rd Dialog
var $logindialog = $('<div class="jqdialog"></div>')
.dialog({
modal: true,
resizable: false,
draggable: false,
buttons:
{
   Cancel: function()
   {
      $logindialog.dialog("close");
      $logindialog.dialog("destroy"); 
   }  
}})
.html(
'<p>You must be logged in to submit a review.</p>' +
'<label for="email">Email:</label>'+
'<input id="email" type="text" name="email" class="t150" value="Email" />'
);






















The "email" text input cannot be selected or typed into! It is not disabled. Also my input:focus{} CSS is not applied when I click on the input field.

What's the problem?

Thanks,

EDIT:
The input fields in the top Dialog can only be edited if it is NOT modal.

That might be ok if I could disable the other Dialogs - so I called $reviewdialog.dialog("disable"), which caused it to be faded - but the content of the $reviewdialog could still be edited - including the input field text! Is that correct? That is not what I consider "disabled".