blockui over jQueryUI modal dialog

Question

I can't make BlockUI work over a modal dialog.
I tried to look after z-index issues, but without success...

In my web page, here is the head :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" ></script> <script type="text/javascript" src="http://jquery.malsup.com/block/jquery.blockUI.js?v2.38" ></script> <link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" /> 

and the body:

<div id="dialog_test" title="Test">     TEST </div>  <a href="#" id="go">GO</a>  <script>     $(function() {         $( "#dialog_test" ).dialog({             autoOpen: false,             modal: true,             buttons: {                 "Cancel": function() {                     $( this ).dialog( "close" );                 },                 "Ajax": function() {                     $.ajax({                         "url" : "http://jquery.malsup.com/block/wait.php",                         "success" : function(json) {                             $( "#dialog_test" ).dialog( "close" );                         }                     });                 }             }         });          $( "#go" ).click(function(event) {             event.preventDefault();             $( "#dialog_test" ).dialog( "open" );         });      });      $(document)         .ajaxStart(function() {             $.blockUI({                 theme: true             })         })         .ajaxStop($.unblockUI);  </script> 

Any idea?

Answer 1

You don't specify what you have tried with z-index.

The blockUI plugin has an option to change the z-index of the message it creates (documentation):

// z-index for the blocking overlay  baseZ: 1000, 

jQuery UI Dialog as an option for specifying a z-index as well. Its default value is 1000. So you have to set a higher number for the BlockUI option, let's say 2000:

$.blockUI({     theme: true,     baseZ: 2000 }) 

DEMO