Opened 13 years ago
Closed 6 years ago
#5901 closed feature (fixed)
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: | #7053 | Blocking: |
Description
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 div
in addition to the dialog's div
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 div
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 .ui-dialog.critical-alert
, then I'd be fine.
Change History (10)
comment:1 Changed 13 years ago by
comment:2 Changed 11 years ago by
Type: | enhancement → feature |
---|
comment:4 Changed 10 years ago by
Milestone: | TBD → 1.10.0 |
---|
comment:5 Changed 10 years ago by
Status: | new → open |
---|
comment:6 Changed 10 years ago by
Milestone: | 1.10.0 → none |
---|
comment:7 Changed 10 years ago by
Would it be better if there was a 2nd option for the overlay? I am willing to tackle this after some clarification.
comment:9 Changed 10 years ago by
Blocked by: | 7053 added |
---|
comment:10 Changed 6 years ago by
Milestone: | none → 1.12.0 |
---|---|
Resolution: | → fixed |
Status: | open → closed |
Summary: | Apply additional dialogClass(es) to modal dialog's overlay div → Apply additional class(es) to modal dialog's overlay div |
This is handled by the new classes
option.
I've implemented this enhancement with this patch: http://github.com/daguej/jquery-ui/blob/0c069112229272157c3af4838bac30301e486e2d/ui/jquery.ui.dialog.js