CODEWITHSUNDEEP
jqueryjquery-ui
cssyphus
cssyphus

Reputation: 40038

Two jQueryUI dialogs - change background on only one

At one point in my app, I may have two jQueryUI dialogs visible at once. I would like the customize the look (eg. change bg color) of Dlg2 only, to make them more distinct.

However, on closing Dlg2, I do not want this change to later affect Dlg1.

My first thought was to add a class to Dlg2 -- but I'm having a blond moment -- where/how would I do that? Where would I put the .addClass() code? And where would I removeClass() when done (or would I even need to)?

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

Upvotes: 1

Views: 156

Answers (1)

user2864740
user2864740

Reputation: 61875

Assign one dialog an additional class and add the appropriate CSS rules.

See the dialogClass option:

The specified class name(s) will be added to the dialog, for additional theming.

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

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

See this fiddle. However, as shown in gibberish's fiddle, the following is a sufficient rule:

.important-dialog { background-color: yellow }

Upvotes: 1

Related Questions