CSS JQuery UI 将 id 添加到对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11308857/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery UI add id to dialog
提问by Vladimir
How can I add id to specific dialog? I just want to apply separate style for each dialog and try doing it like this:
如何将 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');
but dialog created inside body tag without id and I cant apply style for it.
但是在没有 id 的 body 标签中创建了对话框，我无法为其应用样式。
回答by Andreas
A bit late, but this is how it could be done:
有点晚了，但这是可以做到的：
$('#placeholderId').dialog('widget').attr('id', 'dialogId');
$('#placeholderId').dialog('widget')gives you the surrounding <div> of the dialog, which is most likely the element you want to set the ID on.
$('#placeholderId').dialog('widget')为您提供对话框的周围 <div>，这很可能是您想要设置 ID 的元素。
回答by Samuel Rossille
If your goal is just to use this id in the css, you can achieve this with a css class instead.
如果您的目标只是在 css 中使用此 id，则可以使用 css 类来实现。
The dialogClassoption allows you to specify a class that will be applied to the dialog. You can then use this class in your selectors to apply a different style for a specific dialog.
该dialogClass选项允许你指定将被应用到对话框类。然后，您可以在选择器中使用此类为特定对话框应用不同的样式。
回答by TJ VanToll
The problem in your example code is that you are adding the idto the result of .find('.ui-dialog-titlebar').remove()instead of the dialog itself. The following should work for you.
您的示例代码中的问题是您将 加到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');
回答by EdJIMucator
I disagree with the voted answer (not a personal attack just disagree with the "dirty hack" part). He is true that there is no ID option for jquery Dialog Box, however should you come to the conclusion that an ID is necessary, the following code should suffice. My tour guide JS I'm developing was very much in need of such an ID.
我不同意投票的答案（不是人身攻击，只是不同意“肮脏的黑客”部分）。他确实jquery Dialog Box没有ID选项，但是如果你得出一个ID是必要的结论，下面的代码就足够了。我正在开发的导游 JS 非常需要这样的 ID。
// Here I'm declaring the dynamically inserted content [e.g what I'm creating] to have an ID of tempstep, this will be used with the call below to add an ID to the jQuery Dialog Box
// 在这里，我声明动态插入的内容 [例如我正在创建的内容] 具有 tempstep ID，这将与下面的调用一起用于向 jQuery 对话框添加 ID
Code : jQuery ('<div id="tempstep"></div>').dialog({
代码 ： jQuery ('<div id="tempstep"></div>').dialog({
Code : jQuery('#tempstep').parent().attr("id","dialogBox");
代码 ： jQuery('#tempstep').parent().attr("id","dialogBox");
