Làm cách nào để thay đổi màu nền của Hộp thoại Giao diện người dùng jQuery?

Question

Tôi đang gặp khó khăn trong việc tìm ra cách thay đổi màu nền của jQuery UI Dialog.

Tôi đã xem nhiều tài liệu tham khảo về cách thay đổi/xóa thanh tiêu đề nhưng không phải là toàn bộ nền bao gồm cả góc cong đó.

Đây là cố gắng của tôi:

http://jsfiddle.net/dEvKb/11/

Vấn đề là .ui-widget nội dung chỉ áp dụng cho khu vực vuông trong hộp thoại nhưng không bao gồm góc cong.

Tôi đã tìm thấy một lớp học .ui-corner-all lớp hy vọng nó sẽ tô màu toàn bộ nền nhưng chỉ một nửa hộp thoại có màu. (bạn có thể thấy điều này trong jsfiddle)

Có ai đã làm điều này trước đây không?

Answer 1

bạn có thể sử dụng cách này

http://jsfiddle.net/dEvKb/15/

Bạn nên đặt cho tất cả các nền lớp với việc sử dụng! Important.

.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background:yellow !important}

Answer 2

Sử dụng các lớp css:

• ui-thoại
  • chứa chính của toàn bộ điều
• ui-thoại-tiêu đề
  • Đây là nơi mà danh hiệu thực sự xuất hiện
• ui-thoại-titlebar
  • Diện tích nơi tiêu đề của hộp thoại sẽ được nếu tồn tại
• ui-dialog- content
  • Diện tích nơi div của bạn là thực sự nạp
• ui-resizable-xử lý
  • Những divs được sử dụng để thay đổi kích thước hộp thoại nhưng thường invisble theo thiết lập của bạn
• ui-dialog-buttonpane
  • Đây là nơi các nút sẽ đến nếu e xist
• ui-thoại-buttonset
  • Đây là nơi mà các nút thực sự xuất hiện

Ngoài ra, không giống như câu trả lời cho lựa chọn, hãy lưu ý, BẠN KHÔNG CÓ SỬ DỤNG !important.

Nếu bạn muốn có cuộc gọi trực tiếp, hãy thiết lập mọi thứ và tạo hộp thoại của bạn. Tải trang trong Chrome hoặc FF (chrome dễ đọc hơn). Sau đó, chỉ cần mở hộp thoại và chọn phần tử bạn muốn thay đổi. Xem CSS của nó trong Browser's Developer Tools của bạn. Bạn sẽ có thể thấy dòng chính xác jqueryui sử dụng để thực hiện cuộc gọi css. Chỉ cần sao chép dòng đó vào CSS của riêng bạn và đảm bảo nó được tải sau và hộp thoại của bạn sẽ nhận được ghi đè mới.

Answer 3

Sử dụng lớp này trong css

.ui-dialog .ui-dialog-content { 
    border: 0; 
    padding: .5em 1em; 
    background: #ff0000; 
    overflow: auto; 
    zoom: 1; 
} 

Answer 4

Xin lưu ý rằng bạn cũng có thể đi và làm cho CSS tùy chỉnh của riêng bạn sử dụng liên kết này trong jQuery

jQuery cho phép chúng tôi để thực hiện một tùy chỉnh-css. Vui lòng chọn chủ đề bạn muốn từ thư viện và nhấn nút chỉnh sửa, bạn sẽ có thể thay đổi hầu hết mọi thứ về hộp thoại, cũng như các góc được làm tròn.

Sau đó bạn cần tải xuống toàn bộ gói jQuery bên trong nó, bạn sẽ thấy thư mục css/custom-css chỉ cần đặt trong thẻ css của bạn và tất cả sẽ được sắp xếp về cơ bản.

Các cách trên cũng đúng vì bạn có thể thay đổi nó nhưng bạn sẽ phải tìm kiếm các lớp và các công cụ tương tự trong CSS cũng jQuery thực hiện điều đó một cách dễ dàng và nó hoạt động với tôi vì vậy bạn cũng có thể thử nó.

Những gì tôi làm cơ bản là tạo hai đến ba tờ tùy chỉnh và sau đó tải chúng lên và chơi với chúng và cuối cùng chọn một cho trang web và loại bỏ phần còn lại.

Tôi hy vọng điều này sẽ giúp ...

Answer 5

Nếu bạn muốn nhắm đến một hộp thoại cụ thể mà bạn có thể làm theo cách này:

$('#yourDialog').dialog(
{ 
    autoOpen: false, 
    open: function(e) { 
     $(e.target).parent().css('background-color','orangered'); 
    } 
});