Skip to main content

Search and Top Navigation

#5901 closed feature (fixed)

Opened August 04, 2010 08:31PM UTC

Closed September 01, 2016 02:02PM UTC

Apply additional class(es) to modal dialog's overlay div

Reported by: josh3736 Owned by:
Priority: minor Milestone: 1.12.0
Component: ui.dialog Version: 1.8.2
Keywords: Cc:
Blocked by: Blocking:

When creating a dialog, it is possible to specify custom class(es) to be added to the dialog (to facilitate additional theming):

$( ".selector" ).dialog({ dialogClass: 'alert' });

It would be nice if this class were added to the overlay

in addition to the dialog's
so that theming can be applied to the dialog's overlay background as well. For example, I might want the overlay to have a different pattern when I'm displaying a critical message versus an informational message.

With this change, I can just add to my CSS:

.ui-widget-overlay.critical-alert { background:red; }

...or whatever to help call attention to the fact this is an important message.

Possible regression: anyone who wasn't careful with their CSS selectors when theming custom-classed dialogs might find their overlay

s look strange after upgrading. As an example, if I had:

.critical-alert { border:2px solid red; }

...then both the dialog and [now] the overlay will have a red border. However, if my selector was

, then I'd be fine.

Attachments (0)
Change History (10)

Changed August 04, 2010 08:45PM UTC by josh3736 comment:1

Changed June 26, 2012 01:22AM UTC by scottgonzalez comment:2

type: enhancementfeature

Changed July 24, 2012 12:06PM UTC by scottgonzalez comment:3

#8455 is a duplicate of this ticket.

Changed October 11, 2012 09:02PM UTC by scottgonzalez comment:4

milestone: TBD1.10.0

Changed October 15, 2012 07:12PM UTC by bavanyo comment:5

status: newopen

Changed January 25, 2013 09:23PM UTC by tj.vantoll comment:6

milestone: 1.10.0none

Changed January 29, 2013 03:12AM UTC by djQuery comment:7

Would it be better if there was a 2nd option for the overlay?

I am willing to tackle this after some clarification.

Changed January 29, 2013 01:45PM UTC by scottgonzalez comment:8

This will be handled by #7053.

Changed January 29, 2013 01:46PM UTC by scottgonzalez comment:9

blockedby: → 7053

Changed September 01, 2016 02:02PM UTC by scottgonzalez comment:10

milestone: none1.12.0
resolution: → fixed
status: openclosed
summary: Apply additional dialogClass(es) to modal dialog's overlay divApply additional class(es) to modal dialog's overlay div

This is handled by the new classes option.