Question

如何在特定对话框中添加ID？我只想为每个对话框应用单独的样式，并尝试这样做：

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

但是在body标签内创建的对话框没有id，我无法为它应用样式。

Answer 1

有点晚了，但这是可以做到的：

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

$（'#placeholderId'）。dialog（'widget'） 为您提供周围的＆lt; div＆gt;对话框，很可能是您要设置ID的元素。

Answer 2

如果您的目标只是在css中使用此ID，则可以使用css类来实现此目的。

dialogClass选项允许您指定将应用于对话框的类。然后，您可以在选择器中使用此类为特定对话框应用不同的样式。

Answer 3

示例代码中的问题是您要将id添加到.find('.ui-dialog-titlebar').remove()的结果而不是对话框本身。以下内容适合您。

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 4

我不同意投票的答案（不是个人攻击只是不同意“肮脏的黑客”部分）。他确实没有jquery对话框的ID选项，但是如果您得出ID是必要的结论，下面的代码就足够了。我正在开发的导游JS非常需要这样的ID。

//这里我宣布动态插入的内容[例如我正在创建的]具有一个tempstep的ID，这将与下面的调用一起使用以向jQuery对话框添加ID

代码：jQuery ('<div id="tempstep"></div>').dialog({

代码：jQuery('#tempstep').parent().attr("id","dialogBox");

JQuery UI将id添加到对话框中

4 个答案: