Question

在我的应用程序的某一点上，我可能会同时看到两个jQueryUI对话框。我想仅定制Dlg2的外观（例如，改变bg颜色），使它们更加清晰。

然而，在关闭Dlg2时，我不希望此更改后来影响Dlg1。

我的第一个想法是为Dlg2添加一个课程 - 但我有一个金发碧眼的时刻 - 我在哪里/怎么做？我在哪里放置.addClass（）代码？完成后我会在哪里删除Class（）（或者我甚至需要）？

HTML：

<div id="msg1"></div>
<div id="msg2"></div>
<input id="mybutt" type="button" value="Click Me" />

的javascript / jQuery的：

$('#msg1').dialog({
    autoOpen:false,
    title:'Dialog One',
    width:100,
    height:200
});
$('#msg2').dialog({
    autoOpen:false,
    title:'Dialog TOO',
    width:300,
    height:100
});

$('#mybutt').click(function() {
    $('#msg1').html('<h1>Test</h1><a href=#" id="thetest">Click here</a></p>');
    $('#msg1').dialog('open');
    $(this).hide();
});

$(document).on('click', '#thetest', function() {
    $('#msg2').html('<h2>2nd Dlg</h2><p>Go ahead and <a href="#" id="closeall">Click here</a> to close all</p>');
    $('#msg2').dialog('open');
});

$(document).on('click', '#closeall', function() {
   $('#msg2').dialog('close'); 
   $('#msg1').dialog('close'); 
});

CSS：

*, body{font-size:12px;}
.dlg_content_bg{background:yellow;}

Answer 1

为一个对话框分配一个额外的类并添加适当的CSS规则。

请参阅dialogClass选项：

指定的类名将被添加到对话框中，以用于其他主题。

$('#msg2').dialog({
    dialogClass: 'important-dialog'
});

.ui-dialog.important-dialog,
.ui-dialog.important-dialog > div,
.ui-dialog.important-dialog .ui-dialog-content
{
    background-color: yellow;
}

见this fiddle。但是，如gibberish's fiddle所示，以下是一个充分的规则：

.important-dialog { background-color: yellow }

两个jQuery UI对话框 - 仅改变一个背景

1 个答案: