Giao diện người dùng JQuery thêm id vào hộp thoại

Question

Làm cách nào để thêm id vào hộp thoại cụ thể? Tôi chỉ muốn áp dụng phong cách riêng cho từng thoại và cố gắng làm việc đó như thế này:

var $order_dialog = $("<%= escape_javascript(render('order_mini_site_form', :layout => false)) %>"); 

var current_dialog = $order_dialog.dialog({ 
    width: 515, 
    height: 575, 
    modal: true, 
    resizable: false, 
    draggable: false, 
    title: false, 
    autoOpen: true, 
    closeOnEscape: false, 
    buttons: [ 
    { text: "Отправить запрос" , click: function() { $(this).find('form').submit(); $(this).dialog('close'); } }, 
    { text: "Отмена", click: function() { $(this).dialog('close'); } } 
    ] 
}).parent().find('.ui-dialog-titlebar').remove(); 


$current_dialog.attr('id', 'awesome_dialog'); 

nhưng thoại tạo ra bên trong cơ thể mà không thẻ id và tôi không thể áp dụng phong cách cho nó.

Answer 1

Nếu mục tiêu của bạn chỉ là sử dụng id này trong css, bạn có thể đạt được điều này với một lớp css thay thế.

Tùy chọn dialogClass cho phép bạn chỉ định một lớp sẽ được áp dụng cho hộp thoại. Sau đó, bạn có thể sử dụng lớp này trong bộ chọn của mình để áp dụng một kiểu khác cho một hộp thoại cụ thể.

Answer 2

Sự cố trong mã ví dụ của bạn là bạn đang thêm id vào kết quả của .find('.ui-dialog-titlebar').remove() thay vì chính hộp thoại. Sau đây sẽ làm việc cho bạn.

var $order_dialog = $("<%= escape_javascript(render('order_mini_site_form', :layout => false)) %>"); 

var current_dialog = $order_dialog.dialog({ 
    width: 515, 
    height: 575, 
    modal: true, 
    resizable: false, 
    draggable: false, 
    id: "ololo", 
    title: false, 
    autoOpen: true, 
    closeOnEscape: false, 
    buttons: [ 
    { text: "Отправить запрос" , click: function() { $(this).find('form').submit();    $(this).dialog('close'); } }, 
    { text: "Отмена", click: function() { $(this).dialog('close'); } } 
    ] 
}) 

$current_dialog.parent().find('.ui-dialog-titlebar').remove(); 
$current_dialog.attr('id', 'awesome_dialog'); 

Answer 3

Một hơi muộn, nhưng đây là cách nó có thể được thực hiện:

$('#placeholderId').dialog('widget').attr('id', 'dialogId'); 

$ ('# placeholderId') thoại ('phụ tùng') mang đến cho bạn xung quanh <. div > của hộp thoại, rất có thể là phần tử bạn muốn đặt ID.

Answer 4

Tôi không đồng ý với câu trả lời đã bỏ phiếu (không phải là tấn công cá nhân mà không đồng ý với phần "hack bẩn"). Đúng là không có tùy chọn ID cho Hộp thoại jquery, tuy nhiên bạn nên đi đến kết luận rằng một ID là cần thiết, mã sau đây là đủ. Hướng dẫn viên du lịch của tôi JS Tôi đang phát triển rất cần ID như vậy.

// Ở đây tôi đang tuyên bố nội dung tự động chèn [ví dụ như những gì tôi đang tạo] để có một ID của tempstep, điều này sẽ được sử dụng với các cuộc gọi dưới đây để thêm một ID cho jQuery Dialog Box

Code: jQuery ('<div id="tempstep"></div>').dialog({

Code: jQuery('#tempstep').parent().attr("id","dialogBox");