Sự cố với Hộp thoại jQuery và các plugin Datepicker

Question

Tôi có một hộp thoại và tôi có trường datepicker trên hộp thoại.

Khi tôi mở hộp thoại và nhấp vào trường datepicker, bảng điều khiển datepicker hiển thị phía sau hộp thoại.

Tôi thử thêm các thuộc tính: zindex, stack, bgiframe, nhưng không thành công.

Ai đó có thể giúp tôi?

Tks.

Answer 1

Old trả lời

z-index (lưu ý các dấu nối!) Là tài sản có vấn đề. Hãy chắc chắn rằng bạn đặt nó lớn hơn đối thoại, và chắc chắn rằng bạn đặt nó trên phần tử chính xác. Dưới đây là cách chúng tôi làm điều đó:

#ui-datepicker-div 
{ 
z-index: 1000; /* must be > than popup editor (950) */ 
} 

API Change - 17 tháng 4 2010

Trong file CSS cho bộ chọn ngày, tìm .ui-datepicker mục và thay đổi nó:

.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index: 9999 !important; } 

Sử dụng z-index: 9999! hoạt động trong Firefox 3.5.9 (Kubuntu).

Answer 2

Hộp thoại được hiển thị trong iframe và được hiển thị trên mọi thứ khác (bao gồm cả menu thả xuống). Trong khi đó, datepicker được hiển thị trong HTML bình thường và được đặt hoàn toàn.

Có vẻ như trình ghi ngày tháng đang được hiển thị hoàn toàn tương đối so với trang gốc thay vì iframe. Bạn đã thử đặt lịch bên trong hộp thoại như một blog tiêu chuẩn, không được định vị tuyệt đối chưa? Hoặc bạn có thể sử dụng dropdowns để thay thế.

Answer 3

Kể từ phiên bản giao diện người dùng 1.7.2 ui-datepicker-div không còn là phần tử css hợp lệ nữa. "Ui-datepicker" có vẻ là wrapper ngoài cùng và thiết lập z-index để 99999 đang làm việc một cách chính xác đối với tôi như xa như tôi biết

Answer 4

cho jquery-ui-1.7.2

<style type="text/css"> 
    .ui-datepicker 
    { 
     z-index: 1003; /* must be > than popup editor (1002) */ 
    } 
</style> 

Answer 5

Set này ở đầu trang của bạn. Nó sẽ làm việc tốt:

<style type="text/css"> 
.ui-datepicker {z-index:10100;} 
</style> 

Answer 6

tôi nhận nó làm việc bằng cách gọi

$("#ui-datepicker-div").css("z-index", "1003"); 

Answer 7

cho jquery-ui-1,8

<style type="text/css"> 
    .ui-datepicker 
    { 
     z-index: 1003 !important; /* must be > than popup editor (1002) */ 
    } 
</style> 

Điều quan trọng là cần thiết vì datepicker có element.style đặt z-index thành 1.

Answer 8

Đặt kiểu sau vào phần tử văn bản 'đầu vào': "vị trí: tương đối; z-index: 100000;".

div ngày tháng sẽ lấy chỉ mục z từ đầu vào, nhưng điều này chỉ hoạt động nếu vị trí tương đối.

Sử dụng cách này bạn không phải sửa đổi bất kỳ javascript nào từ giao diện người dùng jQuery.

Answer 9

Giải pháp cho phiên bản 1.8x jquery datepicker, để thay đổi giá trị z-index, không thể thay đổi qua css.

Cái này hoạt động tốt:

jQuery('.ui-datepicker-trigger').click(function() { 
     setTimeout(function() { 
      jQuery('#ui-datepicker-div').css('z-index', 999); 
     }, 500) 
    }); 

Answer 10

này đã làm việc cho tôi:

.ui-datepicker { 
     z-index: 9999 !important; 
    } 

Answer 11

Tôi bị sốc rằng:

a) không có ai ở đây đã đề cập đến một giải pháp chương trình để thiết lập các datepicker z-Index b) không có tùy chọn cho jQuery DatePicker để vượt qua một z-Index khi ràng buộc nó với một phần tử.

Tôi đang sử dụng phương pháp js để tính chỉ mục cao nhất. Chúng tôi mặc định chỉ kiểm tra các div, vì đây là những yếu tố có khả năng nhận được giá trị chỉ mục z và dễ hiểu hơn là phân tích cú pháp mọi phần tử trên trang.

/* Get the highest zindex for elements on the page 
*/ 
function getHighestZIndex(element){ 
    var index_highest = 0; 
    var index_current; 
    if(element == undefined){ 
     element = 'div'; 
    } 
    $(element).each(function(){ 
     index_current = parseInt($(this).css("z-index"), 10); 
     if(index_current > index_highest) { 
      index_highest = index_current; 
     } 
    }); 
    return index_highest; 
} 

Bởi vì chúng ta phải sử dụng javascript để ràng buộc datepicker đến một yếu tố, ví dụ: $ ('# some_element'). Datepicker(), lúc bấy giờ chúng ta thiết lập phong cách các yếu tố mục tiêu của rất datepicker rằng sẽ nhặt z-index từ nó. Nhờ Ronye Vernaes (trong câu trả lời của ông trên trang này) để chỉ ra rằng datepicker() sẽ lấy các yếu tố mục tiêu của z-Index nếu nó có một và được thiết lập để position: relative:

$(this.target).datepicker(); 
var zindex = e.getHighestZIndex(); 
zindex++; 
$(this.target).css('position','relative'); 
$(this.target).css('z-index',zindex); 

this.target là phần tử đầu vào mà chúng ta đang tạo thành trường datepicker. Tại thời điểm ràng buộc, chúng tôi nhận được chỉ mục z cao nhất trên trang và làm cho chỉ mục z của phần tử cao hơn. Khi biểu tượng datepicker được nhấp, nó sẽ nhận chỉ mục z đó từ phần tử đầu vào, bởi vì, như Ronye Vernaes đã đề cập, về vị trí kiểu: tương đối.

Trong giải pháp này, chúng tôi không thử và đoán giá trị z-Index cao nhất sẽ là bao nhiêu. Chúng tôi thực sự GET IT.

Answer 12

Trình ghi ngày giờ hiện đặt z-index bật lên thành nhiều trường liên quan, để giữ nó ở phía trước trường đó, ngay cả khi trường đó nằm trong hộp thoại bật lên. Theo mặc định, chỉ mục z là 0, vì vậy datepicker kết thúc bằng 1. Có trường hợp nào không hiển thị đúng datepicker không? JQuery Forum Post

Để có được một z-index của 100. Bạn cần một đầu vào với z-index:99; và jQueryUI sẽ cập nhật datepicker là z-index:100

<input style="z-index:99;"> hoặc <input class="high-z-index"> và css .high-z-index { z-index: 99; }

Bạn cũng có thể chỉ định z-index để kế thừa nên kế thừa từ hộp thoại của bạn và khiến jQueryUI phát hiện đúng chỉ mục z.

<input style="z-index:inherit;"> hoặc <input class="inhert-z-index"> và css .inherit-z-index { z-index: inherit; }