Opened 7 years ago

Closed 7 months 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 divs 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:2 Changed 5 years ago by scottgonzalez

  • Type changed from enhancement to feature

comment:3 Changed 5 years ago by scottgonzalez

#8455 is a duplicate of this ticket.

comment:4 Changed 4 years ago by scottgonzalez

  • Milestone changed from TBD to 1.10.0

comment:5 Changed 4 years ago by bavanyo

  • Status changed from new to open

comment:6 Changed 4 years ago by tj.vantoll

  • Milestone changed from 1.10.0 to none

comment:7 Changed 4 years ago by djQuery

Would it be better if there was a 2nd option for the overlay? I am willing to tackle this after some clarification.

comment:8 Changed 4 years ago by scottgonzalez

This will be handled by #7053.

comment:9 Changed 4 years ago by scottgonzalez

  • Blocked by 7053 added

comment:10 Changed 7 months ago by scottgonzalez

  • Milestone changed from none to 1.12.0
  • Resolution set to fixed
  • Status changed from open to closed
  • Summary changed from Apply additional dialogClass(es) to modal dialog's overlay div to Apply additional class(es) to modal dialog's overlay div

This is handled by the new classes option.

Note: See TracTickets for help on using tickets.