Tại sao giao diện người dùng jQuery 1.10 xóa tùy chọn hộp thoại jquery zIndex?

Question

Tôi đã tìm thấy phiên bản mới nhất của jQuery UI (1.10) xóa tùy chọn zIndex. Và nó được xác nhận trên trang web jQuery.

Nó thực sự gây sốc cho tôi. Hãy nghĩ về điều này:

Khi chúng ta có một jqGrid, và sử dụng editrow() hoặc addrow() để mở hộp thoại chỉnh sửa để chỉnh sửa một cái gì đó, và có rất nhiều lĩnh vực bên trong, một số trong đó có sự kiện tự xác định, chẳng hạn như, khi bạn bấm vào nó, nó sẽ hiển thị một hộp thoại jQuery để hiển thị một số mặt hàng treeview để chọn.

Dưới jQuery UI 1.9 (bao gồm), bạn có thể đặt tùy chọn zIndex của hộp thoại jQuery lớn hơn hộp thoại chỉnh sửa jqgrid (hỗ trợ hộp thoại chỉnh sửa jqgrid đặt zIndex), vì vậy hộp thoại jQuery luôn bật và có thể xem và sử dụng.

Trong giao diện người dùng jQuery 1.10, bạn không thể đặt zIndex, vì vậy hộp thoại jQuery luôn nằm sau hộp thoại chỉnh sửa jqgrid.

Tôi nghĩ cảnh tượng này rất phổ biến.

Tại sao giao diện người dùng jQuery 1.10 xóa hộp thoại jQuery zIndex? Làm cách nào để kiểm soát thứ tự z-index khi có nhiều hộp thoại?

Answer 1

Tôi nghĩ rằng tôi hiểu sự cố của bạn. Chỉ mục CSS z cho hộp thoại Giao diện người dùng jQuery không đủ cao để luôn hiển thị phía trên nội dung của bạn. Đây là một sửa chữa nhanh:

/* A class used by the jQuery UI CSS framework for their dialogs. */ 
.ui-front { 
    z-index:1000000 !important; /* The default is 100. !important overrides the default. */ 
} 

Answer 2

Chỉ cần đọc những thay đổi-log từ jQuery UI 1.10 (cùng với the bug đó đã được nộp cho nó):

Removed tùy chọn ZIndex

Tương tự như các tùy chọn ngăn xếp, tùy chọn ZIndex là không cần thiết với việc triển khai xếp chồng thích hợp. Chỉ số z được xác định trong CSS và việc xếp chồng hiện được kiểm soát bằng cách đảm bảo hộp thoại tập trung là phần tử "xếp chồng" cuối cùng trong phần tử cha.

Nói cách khác: Bạn nên thuộc tính ngăn xếp các phần tử thay vì "hack" theo cách của bạn để xếp chồng bằng cách sử dụng tùy chọn zIndex.

Answer 3

Bạn đã thử sử dụng tùy chọn "phụ thêm"? Chỉ cần thêm động một trình bao bọc với chỉ mục z của những gì bạn cần, sau đó sử dụng id của phần tử đó làm công cụ chọn trong đối số "appendTo".

http://api.jqueryui.com/dialog/#option-appendTo

Answer 4

Bạn đã thử chưa?

$(".selector").dialog("moveToTop"); 

tham khảo: http://api.jqueryui.com/dialog/#method-moveToTop

Answer 5

$('#element').dialog({  modal: true, 
          stack: false, 
          zIndex: 9999, 
... 

làm việc cho tôi

Answer 6

Nếu bạn muốn áp dụng các ZIndex sử dụng jQuery ngay sau khi bạn khởi tạo hộp thoại, bạn có thể làm như sau:

$('#element').dialog({ your options... }).parent('.ui-dialog').css('zIndex',9999);