Chủ đề và kiểu hộp thoại jQuery

Làm cách nào để thay đổi màu nền của thanh tiêu đề của hộp thoại jQuery?Chủ đề và kiểu hộp thoại jQuery

Tôi đã xem xét themeroller nhưng nó không có vẻ làm việc cho tôi.

Cảm ơn

2009-03-31 Picflight

Phụ thuộc vào trình cắm mà bạn sử dụng để hiển thị hộp thoại như vậy (không có bất kỳ hộp thoại nào trong chính jQuery). –

tôi làm theo cách này (thêm "ui-state-lỗi" phong cách cho tiêu đề):

<script type="text/javascript"> 
      $(function() { 
       $("#msg").dialog({ 
        open: function() { 
         $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error"); 
        } 

       }); 

      }); 
     </script>

Nguồn

2009-12-02 14:17:29 DonSleza4e

Không thay đổi nó bằng javascript. Sử dụng CSS. –

Có các lớp được liên kết với từng phần tử trong hộp thoại.

Sử dụng Firebug để kiểm tra các yếu tố và sử dụng CSS để tạo kiểu cho chúng. Ví dụ, thanh tiêu đề có lớp "ui-dialog-titlebar".

(điều này giả định rằng bạn đang sử dụng jQuery UI Dialog)

Nguồn

2009-03-31 18:54:23 jonstjohn

Bạn có thể thay đổi nó bằng cách thay đổi lớp CSS ui-thoại-titlebar, nhưng tôi khuyên bạn nên sử dụng ThemeRoller tool.

Xem thêm:

Nguồn

2009-03-31 18:55:23 CMS

Các ví dụ trước hoạt động tốt nhưng chỉ có màu đỏ của chủ đề lỗi.

Dưới đây là một giải pháp đơn giản chỉ với việc thay đổi hình ảnh tiêu đề trong css:

css:

.ui-widget-header-custom{ 
    background: #f6a828 url(../images/ui-bg_flat_95_0a43ac_40x100.png) 50% 50% repeat-x;  
}

javascript:

$('#my_dialog').dialog({ 
    open: function(event, ui){ 
     $(this).parents(".ui-dialog:first").find(".ui-widget-header") 
      .removeClass("ui-widget-header").addClass("ui-widget-header-custom"); 
    } 
});

ý rằng trái với ví dụ trước, tôi đã xóa the:

removeClass("ui-widget-header")

thay vì chỉ thêm lớp học trên:

find(".ui-dialog-titlebar")

Phải lưu ý rằng ví dụ này hoạt động với tiêu đề hộp thoại không có liên kết.

Nguồn

2011-07-14 18:39:05

Sử dụng thuộc tính dialogClass. Bạn có thể áp dụng cho bất kỳ css nào trong hộp thoại jquery. Dưới đây chúng tôi đang định dạng các khối tiêu đề và nội dung.

<head> 
<style> 
.main-dialog-class .ui-widget-header{background: url("/Images/your-background.png") repeat-x scroll 34px 42px #a4cf50;font-size:16px;border:0;text-transform:uppercase} 
.main-dialog-class .ui-widget-content{background-image:none;background-color:#fff} 
</style> 
<script> 
     $('#jq_dialog').dialog({ 
      title: 'Detalhes do produto', 
      modal: true, 
      resizable: false, 
      width: 500, 
      maxHeight: 400, 
      closeText: 'fechar', 
      draggable: true, 
      show: 'fade', 
      hide: 'fade', 
      dialogClass: 'main-dialog-class' 
     }); 
</script> 
</head> 
<body> 
<div id="jq_dialog">Hello StackOverflow!</div> 
</body>

Nguồn

2012-08-16 13:16:44

Tôi đồng ý. Áp dụng hoặc loại bỏ các lớp học với javascript có vẻ là sai lầm để đi về nó. Các lớp css mô tả chính xác trạng thái của phần tử, bạn chỉ muốn thay đổi sự xuất hiện của phần tử trong trạng thái đó. – ctb

Điều gì về việc thay đổi màu sắc của các nút của cửa sổ bật lên phương thức? –

Đôi khi bạn không thể chỉnh sửa tệp css. Vì vậy, bạn có thể thử điều này:

dialog = $('<div/>').dialog({ 
    title: 'Dialog with css for title bar', 
    open: function() { 
    $(this).parents(".ui-dialog:first").find('.ui-dialog-titlebar').css('background-color','#275D9E'); 
    } 
});

Nguồn

2014-04-07 09:56:33 Hermann77

Chủ đề và kiểu hộp thoại jQuery

Trả lời

Các vấn đề liên quan