blockui qua hộp thoại phương thức jQueryUI

Question

Tôi không thể làm cho BlockUI hoạt động trên hộp thoại phương thức.
tôi đã cố gắng để chăm sóc các vấn đề z-index, nhưng không thành công ...

Trong trang web của tôi, đây là người đứng đầu:

<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" /> 

và cơ thể:

<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> 

Bất kỳ ý tưởng?

Answer 1

Bạn không chỉ định những gì bạn đã thử với chỉ mục z.

Các blockUI Plugin có một tùy chọn để thay đổi z-index của thông điệp nó tạo ra (documentation):

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

jQuery UI Dialog như một option for specifying a z-index là tốt. Giá trị mặc định của nó là 1000. Vì vậy, bạn phải thiết lập một số cao hơn cho các tùy chọn BlockUI, giả sử 2000:

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

DEMO

Answer 2

Cảm ơn Didier cho câu trả lời của bạn, nó giúp làm cho tôi đi đúng hướng. Bạn sẽ nhận thấy rằng jsfiddle trong câu trả lời của Didier hoạt động lần đầu tiên bạn mở hộp thoại nhưng bất kỳ kết quả mở và ajax nào khác trong các phần tử blockUI xuất hiện bên dưới hộp thoại. Hộp thoại phải xác định lại chỉ số z-index của nó thành chó hàng đầu mỗi lần mở.

Tôi đã tìm thấy hai cách có thể xung quanh này:

1. 'destroy' hộp thoại khi nó được đóng lại và tạo lại nó khi nó được mở ra.

2. thay vì chặn toàn bộ giao diện người dùng, chỉ cần chặn hộp thoại . Điều này có thể được thực hiện bằng cách sử dụng widget method, như thế này:

   $(".selector").dialog("widget").block({ 
       theme: false, 
       message: '<h1>Wait for me please...</h1>', 
       css: { border: '3px solid #a00' } 
   });