JQuery UI dodać identyfikator do okna dialogowego

Question

Jak dodać identyfikator do określonego okna dialogowego? Chcę po prostu zastosować oddzielny styl dla każdego okna i spróbować zrobić to tak:

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'); 

ale okno utworzone wewnątrz znacznika body bez identyfikatora i nie mogę zastosować styl dla niego.

Answer 1

Jeśli Twoim celem jest użycie tego identyfikatora w css, możesz to osiągnąć przy pomocy klasy css.

Opcja dialogClass pozwala określić klasę, która zostanie zastosowana w oknie dialogowym. Następnie możesz użyć tej klasy w selektorach, aby zastosować inny styl dla określonego okna dialogowego.

Answer 2

Problem w twoim przykładowym kodzie polega na tym, że dodajesz id do wyniku .find('.ui-dialog-titlebar').remove() zamiast samego okna dialogowego. Poniższe powinny działać dla Ciebie.

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

Trochę późno, ale jest to w jaki sposób można to zrobić:

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

$ ('# placeholderId') dialog ('widget') daje otaczającej <. div > okna dialogowego, które jest najprawdopodobniej elementem, na którym chcesz ustawić ID.

Answer 4

Nie zgadzam się z głosowaną odpowiedzią (a nie osobistym atakiem, nie zgadzam się z częścią "brudne włamanie"). Jest prawdą, że nie ma opcji ID dla okna dialogowego jquery, ale jeśli dojdziesz do wniosku, że identyfikator jest konieczny, poniższy kod powinien wystarczyć. Mój przewodnik po JS, który rozwijam, bardzo potrzebował takiego identyfikatora.

// Tutaj mam deklarowania dynamicznie wstawionego treści [np co tworzę], aby mieć identyfikator z tempstep, to będą wykorzystane przy wywołaniu poniżej, aby dodać identyfikator do jQuery Dialog Box

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

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