Hi.

Bootstrap theme use Ctools to implement Bootstrap modal. But Ctools modal z-index (1000) is different than original Bootstrap modal z-index (1040). When fixed top menu (z-index 1030) used, it appears above modal background and popup itself.

In latest dev version there was workaround: Allow modal to handle fixed navbar and have flexible height. (https://www.drupal.org/node/2404405)

But it will be better to fix modal z-index itself. User don't need to see fixed menu above popup. Such fix will be welcome for devices with small screens. Popup will appear on full screen.

CommentFileSizeAuthor
#3 bootstrap-fixed_menu_modal_zindex-2457417-3.patch2 KBAlexKirienko
#1 bootstrap-fixed_menu_modal_zindex-2457417-1.patch25.76 KBAlexKirienko
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

AlexKirienko’s picture

AlexKirienko CreditAttribution: AlexKirienko at WikiJob commented
Assigned: AlexKirienko » Unassigned
Category: Feature request » Bug report
Status: Active » Needs review
FileSize
bootstrap-fixed_menu_modal_zindex-2457417-1.patch25.76 KB

Please check attached patch.

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented
Title: Modal for sites with fixed menu » Ctools modal for sites with fixed menu
Status: Needs review » Needs work
  1. Please, do not include the compiled CSS. This is automatically done when a maintainer commits.
  2. +++ b/starterkits/less/less/overrides.less
@@ -796,3 +796,11 @@ div.features-export-list {
+// Fix Ctools Modal z-index. Use Bootstrap modal z-index values.

    Just make the comment block say:

    /**
 * Ctools overrides.
 */

    It is pretty self evident what the code is doing. 

  3. +++ b/starterkits/less/less/overrides.less
@@ -796,3 +796,11 @@ div.features-export-list {
+#modalBackdrop {
+  z-index: @zindex-modal-background !important;
+}
+#modalContent {
+  z-index: @zindex-modal !important;
+}

    Why is !important here? Is this really necessary?

AlexKirienko’s picture

AlexKirienko CreditAttribution: AlexKirienko at WikiJob commented
Status: Needs work » Needs review
FileSize
bootstrap-fixed_menu_modal_zindex-2457417-3.patch2 KB

Thank you for quick feedback.

> 1. Please, do not include the compiled CSS
Thank you, I didn't know about it.

>2. Just make the comment block say:
I have checked other comments above. They all have different format. I have done comment in same way as previous comments in this file.

>3. Why is !important here? Is this really necessary?

<div id="modalBackdrop" style="z-index: 1000; display: none;"></div>
<div id="modalContent" style="z-index: 1001; position: absolute;">

Ctools use inline style. Without !important this override will not work.

Please check updated patch.

AlexKirienko’s picture

AlexKirienko CreditAttribution: AlexKirienko at WikiJob commented

No need commit this patch. I have better approach. I will publish it soon.

AlexKirienko’s picture

AlexKirienko CreditAttribution: AlexKirienko commented
Status: Needs review » Closed (fixed)