Bootstrap Modal when Off Canvas Sidebar is Open

Question

I am working on a bootstrap site that uses an off canvas sidebar menu. This menu displays a minibasket with cart contents at widths lower than 980px once an item is added to the cart. At the bottom of the menu is a checkout button. The button triggers a modal for a login/register form. When this modal is triggered the sidebar menu remains open.

The issue: The actual modal body content displays "below" the sidebar content instead of displaying as nicely as all the others on the site and on the bootstrap site samples. A z-index issue or so it seems. :/ It seems no matter how I play with it, nothing is working.

The actual modal code was moved from the sidebar to the top of the page. My thought was that this should alleviate most display issues. I tried using rules to override the zindex of the off canvas menu when the modal is open but that flopped.

Any ideas would be greatly appreciated!

Thanks! Julie

Bootstrap Modal...

    <div aria-labelledby="myModalLabel" role="dialog" class="modal fade w2mcheckout_modal in" tabindex="-1" id="ctl00_ctl00_NestedMaster_CheckoutModal1_mbCheckoutModal1" >
  <div class="modal-backdrop fade in"></div>
  <div role="document" class="checkoutModal">
    <div class="modal-content">
      <div class="modal-body"> Register and Login Form Code not included to keep things simple... </div>
      <div class="checkoutModal_footer"> </div>
    </div>
  </div>
</div>
</div>

Off Canvass Sidebar...

<div id="ctl00_ctl00_NestedMaster_HeaderCartFlyout1_HeaderCartFlyoutAjax">
  <nav role="navigation" class="navmenu navmenu-default navmenu-fixed-right offcanvas in canvas-slid" id="myNavmenu2" style="right: 0px; left: 523px;">
Minibasket/Shopping Cart widget code left out for simplicity...
  </nav>

  The off canvass nav is triggered from a button/icon displayed on the main page title/header once something is added to the cart. This is for views under 980px as mentioned above.

  <div class="pageHeader">
    <h1>CHOOSE CUPCAKES</h1>
    <input type="hidden" id="ctl00_ctl00_NestedMaster_HeaderCartFlyout1_hiddenMargin" name="ctl00$ctl00$NestedMaster$HeaderCartFlyout1$hiddenMargin">
    <div class="pageHeader__navbar" id="ctl00_ctl00_NestedMaster_HeaderCartFlyout1_SidebarTrigger" style="margin-top: 0px;">
      <button data-canvas="body" data-target="#myNavmenu2" data-toggle="offcanvas" class="pageHeader__navbarToggle canvas-slid" type="button" id="ctl00_ctl00_NestedMaster_HeaderCartFlyout1_PageHeaderNavToggleButton" style="right: 251px; left: 437px;">
      <div class="pageHeader__navBarToggleImg pageHeader__navBarToggleImg_arrow">
        <div class="text_qty_r">
          <div class="text_qty_a"><span class="text_pos">1</span></div>
        </div>
      </div>
      </button>
    </div>
  </div>
</div>

Please post a **minimal working example** of your code (HTML/CSS/JS) in a [Snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [mcve] and [ask]. — vanburen, Jun 21 '16 at 00:04

score 1 · Answer 1 · answered Jan 04 '21 at 11:05

1

I added a z-index to my modal that is larger than the offcanvas sidebar container. That worked for me!

offcanvas z-index was 1050

.modal-backdrop {
  z-index: 1055;
}

.my-product-review-modal {
  z-index: 1800;
}

answered Jan 04 '21 at 11:05

Shinu K Narayanan

71
1
4

score 0 · Answer 2 · answered Feb 04 '23 at 15:15

I added a z-index higher than the off-canvas Z-index and it still did not work. So I removed the modal div from the off-canvas container and pasted it outside in the parent container that contains both the off-canvas and the modal divs. This worked perfectly.

Bootstrap Modal when Off Canvas Sidebar is Open

2 Answers2