Problem/Motivation

The Drupal modal leverage the jQuery UI modal widget. The z-index of the widgets modal background (the transparent black screen that covers page contents) is set to a seemingly low value: 100. At this value, it's unlikely that the background will cover much in Drupal, including the Overlay which starts at a z-index of 500.

Here's an image illustrating how the modal background neither covers the Toolbar tray, nor the Edit in-place toolbar, both of which it should occlude from further action until the modal decision is satisfied.

Screenshot illustrating how the modal background neither covers the Toolbar tray, nor the Edit in-place toolbar, both of which it should occlude from further action until the modal decision is satisfied

Proposed resolution

Override and adjust the z-index of the jQuery modal dialog so that it covers core UI elements with certainty. We probably need to start at 1000. I don't personally know of any Drupal UI element that exceeds a z-index of 501. This gives contrib z-indices from 502 to 999, certainly sufficient room to play in.

Remaining tasks

Propose a patch

User interface changes

The Drupal modal will have the highest z-index of core UI elements in Drupal

API changes

None, this is a CSS issue.

#2071801: Client-side generated dialogs provide an inconsistent experience
#2067285: The entity in-place editing toolbar appears above the Drupal dialog

Original report by @jessebeach

CommentFileSizeAuthor
#13 2072037-13.jpg60.07 KBBiigNiick
#8 toolbar-z-index-2072037.patch1.41 KBjimafisk
#8 Screen Shot 2014-01-25 at 5.06.49 PM.png61.44 KBjimafisk
#5 Screen Shot 2013-09-11 at 3.23.37 PM.png27.91 KBrichardj
Augue_Dignissim_Iaceo_Torqueo___Drupal_D8_Dev.png76.36 KBjessebeach
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jessebeach’s picture

jessebeach CreditAttribution: jessebeach commented
Issue tags: +modal placement

adding modal placement tag.

nod_’s picture

nod_
Primary language French
Location Lille
CreditAttribution: nod_ commented

how about we lower the z-indexes everywhere else in Drupal. 500 is a crazy number…

richardj’s picture

richardj CreditAttribution: richardj commented

@nod_ no it isn't, max value usable is basically a positive 32-bit integer so we can count to over 2 billion, not saying we have to use the max available value, but set it high enough that it will always cover other elements. Lowering all the other z-indexes is not really a workable solution because you can't take into account all the contrib modules and their z-indexes.

jessebeach’s picture

jessebeach CreditAttribution: jessebeach commented

500 has been in place for a few years now. Dropping it will probably disrupt layering of some contrib modules are richardj mentions. There's no harm in leaving it at that level. We've got enough room to play over top of it.

richardj’s picture

richardj CreditAttribution: richardj commented
FileSize
Screen Shot 2013-09-11 at 3.23.37 PM.png27.91 KB

I remembered that there was an instance of a contrib module element showing on top of the overlay. This is when you use the Leaflet module, the Leaflet controls have a z-index of 1000.

I attached a screenshot.

This is only to give some perspective on the issue, i would say, make the z-index of the overlay ridiculously high so that no other module will try to top that. For me that seems the best option.

And on top of that, make the z-index of the modal window a bit more higher than that, so it stays self containing.

panda85’s picture

panda85 CreditAttribution: panda85 commented
Assigned: Unassigned » panda85
Issue summary: View changes
jimafisk’s picture

jimafisk CreditAttribution: jimafisk commented
Assigned: panda85 » Unassigned
Status: Active » Closed (won't fix)

Closed this issue because the Overlay module has been removed from Drupal 8 according to: https://drupal.org/node/2116417

jimafisk’s picture

jimafisk CreditAttribution: jimafisk commented
Status: Closed (won't fix) » Needs review
FileSize
Screen Shot 2014-01-25 at 5.06.49 PM.png61.44 KB
toolbar-z-index-2072037.patch1.41 KB

Re-opening: This ins't related to Overlay, it's related to core/misc/dialog.js

Was able to reproduce by going to admin/config/content/formats/manage/basic_html and clicking on "Show group names" and then "Add group" (see screenshot).

Needed to make edits in core/modules/toolbar/css/toolbar.module.css

See Attached patch. Thanks for the help jessebeach and drewbyist!

barraponto’s picture

barraponto CreditAttribution: barraponto commented 
+++ b/core/modules/toolbar/css/toolbar.module.css
@@ -135,7 +135,7 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
 .toolar .toolbar-tray > .toolbar-lining {

Unrelated: we've got a typo here! Does this break something that should be working?

bendev’s picture

bendev CreditAttribution: bendev commented

Tested patch , works as expected

nicolas@webstanz.be’s picture

nicolas@webstanz.be CreditAttribution: nicolas@webstanz.be commented
Status: Needs review » Reviewed & tested by the community

Patch installed, tested. It works.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
CreditAttribution: alexpott commented
Status: Reviewed & tested by the community » Needs work

This only addresses toolbar z-index - I ponder the impact of this considering of other z-index usages in core. For example:
.contextual, .block-demo-backlink, .node-preview-container among others.

If this is only about toolbar then we need an issue summary about.

BiigNiick’s picture

BiigNiick CreditAttribution: BiigNiick commented
Status: Needs work » Closed (cannot reproduce)
FileSize
2072037-13.jpg60.07 KB

maybe this doesn't need fixed anymore. i don't see the problem still manifesting with a new core download. works same with the patch too.

here is a screenshot without the patch.