jQuery Layout

Reference: http://layout.jquery-dev.net/

HTML

<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<div class="dialog1" style="width:320px;height:200px;">
    <div class="ui-layout-center">Center<input type="text"/></div>
    <div class="ui-layout-north">North #1</div>
    <div class="ui-layout-south">South</div>
</div>
<div class="dialog2" style="width:320px;height:200px;">
    <div class="ui-layout-center">Center<input type="text"/></div>
    <div class="ui-layout-north">North #2</div>
    <div class="ui-layout-south">South</div>
</div>

JavaScript

$('.dialog1').layout({ applyDefaultStyles: true });
$('.dialog2').layout({ applyDefaultStyles: true }); 

var testNum = 1;

// 1) dialog #1 don't works - has disabled controls
if (testNum == 1) {
    $('.dialog1').dialog({modal:true});
}

// 2) dialog #1 works finei
if (testNum == 2) { 
    $('.dialog1').dialog({modal:true, zIndex: 0});
}

// 3) dialog #1 works, dialog #2 don't
if (testNum == 3) { 
    $('.dialog1').dialog({modal:true, zIndex: 0});
    $('.dialog2').dialog({modal:true, zIndex: 0}); 
}

// 4) both dialogs don't work
if (testNum == 4) {     
    $('.dialog1').dialog({modal:true});
    $('.dialog2').dialog({modal:true}); 
}