2013-11-23 3 views
1

В какой-то момент в моем приложении у меня могут быть сразу два диалоговых окна jQueryUI. Я бы хотел настроить внешний вид (например, изменить цвет bg) только для Dlg2, чтобы сделать их более четкими.Два диалоговых окна jQueryUI - изменение фона только на одном

Однако при закрытии Dlg2 я не хочу, чтобы это изменение позже повлияло на Dlg1.

Моя первая мысль заключалась в том, чтобы добавить класс в Dlg2 - но у меня есть светлый момент - где/как я могу это сделать? Где бы я поместил код .addClass()? И где бы я удалилClass(), когда закончил (или мне даже понадобится)?

jsFiddle here

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;} 

ответ

1

Присвоить один диалог дополнительный класс и добавить appropr iate CSS правил.

См dialogClass вариант:

Указанное имя (s) класс будет добавлен в диалоговое окно для дополнительного тематизации.


$('#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 } 
+0

[Работает отлично] (http://jsfiddle.net/6KHsF/1/), спасибо. – gibberish

Смежные вопросы