jquery-ui datepicker thay đổi z-index

Vấn đề khá dễ hiểu mặc dù tôi đang gặp khó khăn trong việc tìm ra cách giải quyết nó.

Tôi đang sử dụng công cụ chọn ngày jQuery-ui cùng với "nút bật / tắt kiểu ios" tùy chỉnh. Việc chuyển đổi này sử dụng một số yếu tố được định vị tuyệt đối hiện đang hiển thị trên đầu bộ chọn ngày của tôi.

xem vòng tròn xấu xí bao phủ ngày 6 tháng 7 bên dưới ...

cách bẩn để làm điều này (ít nhất là imo) là viết một kiểu trong một trong các bảng định kiểu của tôi, nhưng tôi muốn sử dụng một số javascript khi trình chọn khởi chạy để hoàn thành việc này.

Tôi đã thử rồi

$('.date_field').datepicker(); 
$('.date_field').datepicker("widget").css({"z-index":100});

và

$('.date_field').datepicker({
    beforeShow: function(input, inst) { 
        inst.dpDiv.css({"z-index":100});
    }
});

nhưng có vẻ như chỉ số z bị ghi đè mỗi khi trình chọn ngày được khởi chạy.

bất kỳ trợ giúp được đánh giá cao!

Mã JS của bạn trong câu hỏi không hoạt động vì jQuery đặt lại stylethuộc tính của tiện ích con người chọn ngày mỗi khi bạn gọi nó.

Một cách dễ dàng để ghi đè lên nó style's z-indexlà với một !importantquy tắc CSS như đã đề cập trong câu trả lời khác . Tuy nhiên, một câu trả lời khác gợi ý thiết lập position: relative;và z-indextrên chính yếu tố đầu vào sẽ được tự động sao chép sang tiện ích Người chọn ngày.

Tuy nhiên, theo yêu cầu, nếu vì bất kỳ lý do gì mà bạn thực sự cần đặt động, thêm nhiều mã và xử lý không cần thiết vào trang của mình, bạn có thể thử cách này:

$('.date_field').datepicker({
    //comment the beforeShow handler if you want to see the ugly overlay
    beforeShow: function() {
        setTimeout(function(){
            $('.ui-datepicker').css('z-index', 99999999999999);
        }, 0);
    }
});

Vĩ cầm

Tôi đã tạo một đối tượng hàm trì hoãn để đặt z-indextiện ích con, sau khi nó được thiết lập lại bởi giao diện người dùng jQuery, mỗi khi bạn gọi nó. Nó sẽ đủ nhu cầu của bạn.

Việc hack CSS ít xấu hơn IMO, tôi chỉ dành một khoảng trống trong CSS của mình cho các chỉnh sửa giao diện người dùng jQuery (nằm ngay trên các chỉnh sửa IE6 trong các trang của tôi).

Có một cách thanh lịch hơn để làm điều đó. Thêm CSS này:

.date_field {position: relative; z-index:100;}

jQuery sẽ đặt lịch là z-index101 (nhiều hơn một phần tử tương ứng). Các positiontrường phải absolute, relativehoặc fixed. jQuery tìm kiếm phần tử gốc của phần tử đầu tiên, là phần tử tuyệt đối / tương đối / cố định và lấy 'z-index

Bạn cần sử dụng !importantmệnh đề để buộc z-indexgiá trị trong dòng bằng CSS.

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

Điều này đã hiệu quả với tôi khi tôi đang cố gắng sử dụng datepicker kết hợp với phương thức bootstrap:

$('input[id^="txtDate"]').datepicker();
$('input[id^="txtDate"]').on('focus', function (e) {
    e.preventDefault();
    $(this).datepicker('show');
    $(this).datepicker('widget').css('z-index', 1051);
});

Tất nhiên, hãy thay đổi bộ chọn để phù hợp với nhu cầu của riêng bạn. Tôi đặt "z-index" thành 1051 vì z-index cho phương thức bootstrap được đặt thành 1050.

Bộ chọn ngày bây giờ đặt z-index cửa sổ bật lên thành một chỉ mục khác với trường liên kết của nó, để 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ỉ số z là 0, vì vậy datepicker kết thúc bằng 1. Có trường hợp nào mà nó không hiển thị datepicker đúng cách không? Bài đăng trên diễn đàn JQuery

Để có chỉ số z là 100. Bạn cần một đầu vào với z-index:99;và JQueryUI sẽ cập nhật trình chọn ngày để trở thànhz-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 sẽ kế thừa từ hộp thoại của bạn và khiến jQueryUI phát hiện đúng chỉ số z.

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

Cách TỰ NHIÊN NHẤT là chỉ cần đặt phần tử bộ chọn ngày trên một "nền tảng" có vị trí "tương đối" và có "chỉ số z" cao hơn phần tử đang hiển thị trên tầm kiểm soát của bạn ...

Trong trường hợp của tôi, không có gì hoạt động. Tôi cần thêm chỉ số z vào loại đầu vào có bộ chọn ngày.

<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">

Đây là cho Bootstrap datetimepicker

Nếu trình chọn ngày của bạn đang ẩn do cuộn xuất hiện trong việc sử dụng div của bạn:

overflow-x: visible !important;
overflow-y: visible !important;

trong css của toàn bộ div có chứa bộ chọn ngày của bạn và các mục khác như

.dialogModel{
    overflow-x: visible !important;
    overflow-y: visible !important;
}