Trong hộp thoại giao diện người dùng jquery, có thể đặt một hộp thoại phương thức lên trên một hộp thoại phương thức khác không

Question

Tôi có một hộp thoại phương thức bằng cách sử dụng hộp thoại giao diện người dùng jquery. Bây giờ tôi muốn bật một hộp thoại khác khi người dùng thay đổi một trường trong hộp thoại đầu tiên. Cả hai phải là phương thức.

Điều này có thể là tôi đã thử đặt mã này ở đó và không có gì dường như bật lên. Đoạn mã sau hoạt động tốt khi bấm từ một trang thông thường (nơi điều khiển chọn với id: selectDropdownThatICanChange) nhưng nếu cùng một điều khiển chọn mà tôi đang thay đổi chính là hộp thoại hộp thoại ("Mở") không làm gì cả. Sự kiện thay đổi kích hoạt và phương thức mở được gọi nhưng không có gì bật lên.

$("#secondModalDialog").dialog({ 
    resizable: false, 
    height: 'auto', 
    autoOpen: false, 
    title: "Warning", 
    width: 400, 
    modal: true, 
    buttons: { 
     'Close': function() { 
      $("#secondModalDialog").dialog('close'); 
     } 
    } 
}); 


$('#selectDropdownThatICanChange').live("change", function() { 
    $("#secondModalDialog").dialog('open'); 
}); 

và đây là hộp thoại (mà chỉ là một div)

<div id="secondModalDialog" style="display:none"> 
     This is a test <br/> This is atest 
</div> 

Answer 1

UI hộp thoại không Singleton Bạn có thể mở bao nhiêu hộp thoại như bạn muốn. Và theo mặc định, chúng được xếp chồng lên nhau. nhưng khi Dialog tập trung, nó đã xuất hiện trước các hộp thoại khác.

đây là fiddle tôi đã tạo cho bạn. Open dialog from first dialog

// HTML: 
<div id="dialog-modal" title="Basic modal dialog"> 
    Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content. 
    <select id="dialogSelect"> 
     <option>123</option> 
     <option>234</option>  
    </select> 
</div> 
<div id="another-dialog-modal" title="2nd Modal :O"> 
    Second Modal yayyay 
</div> 

// JS: 
$("#dialog-modal").dialog({ 
    height: 300, 
    modal: true, 
    buttons: { 
     Cancel: function() { 
      $(this).dialog('close'); 
     } 
    } 
}); 
$("#dialogSelect").change(function(){ 
    $("#another-dialog-modal").dialog('open'); 
}); 
$("#another-dialog-modal").dialog({ 
    autoOpen: false, 
    modal: true, 
    buttons: { 
     Cancel: function() { 
      $(this).dialog('close'); 
     } 
    } 
}); 

Tôi đặt menu thả xuống trên hộp thoại đầu tiên và sự kiện thay đổi Tôi mở hộp thoại khác phía trên hộp thoại đầu tiên.

Answer 2

Như sushanth reddy chỉ ra trong các ý kiến, thiết lập z-index của hộp thoại:

$("#secondModalDialog").dialog({ 
    resizable: false, 
    height: 'auto', 
    autoOpen: false, 
    title: "Warning", 
    width: 400, 
    modal: true, 
    zindex: 1001, // Default is 1000 
    buttons: { 
     'Close': function() { 
      $("#secondModalDialog").dialog('close'); 
     } 
    } 
}); 

Reference : http://docs.jquery.com/UI/API/1.8/Dialog#option-zIndex

Answer 3

Bạn có thể mở bất kỳ số lượng phương thức nào và hành vi mặc định hoặc xếp theo thứ tự chúng được mở.

Demo: jsFiddle

$('#dialog-modal').dialog({ 
    height: 300, 
    modal: true, 
    buttons: { 
     'Another Modal': function() { 
      $('#another-dialog-modal').dialog('open'); 
     }, 
     Cancel: function() { 
      $(this).dialog('close'); 
     } 
    } 
}); 

$('#another-dialog-modal').dialog({ 
    autoOpen: false, 
    buttons: { 
     Cancel: function() { 
      $(this).dialog('close'); 
     } 
    } 
}); 

Answer 4

Chỉ muốn cho những người tìm kiếm trong tương lai biết. Có thể sử dụng z-index để đặt một modalWidget lên cái khác. Tôi đang sử dụng jquery ui 1.10.3.

Cách bạn thực hiện, bạn cung cấp cho hàm tạo hộp thoại của bạn một lớp hộp thoại.

$("#secondModalDialog").dialog({ 
    title: 'Title', 
    dialogClass: 'ModalWindowDisplayMeOnTopPlease', 
    width: 200, 
    height: 200 
}); 

Sau đó, trong CSS, bạn chỉ định chỉ mục z cao hơn hộp thoại đầu tiên đang sử dụng.

.ModalWindowDisplayMeOnTopPlease { 
    z-index: 100; 
} 

Bạn có thể cần phải kiểm tra xem thiết bị nào đang sử dụng bằng firebug hoặc một số công cụ tìm kiếm để kiểm tra chỉ mục z được lập trình. Chỉ số z mặc định của tôi là 90 trên Widget phương thức đầu tiên. Mã cửa sổ trông smthg như thế này:

<div id="firstModalDialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: 737px;"> 
<div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div>