我正在开发一个引导站点，它使用了一个非画布侧边栏菜单。当一个项目被添加到购物车中时，这个菜单会显示一个宽度小于980px的购物车内容的迷你购物篮。在菜单的底部是一个结帐按钮。这个按钮触发了一个登录/注册表单的模态。当这个模态被触发时，侧边栏菜单保持打开状态。
问题：实际的模态主体内容显示在侧边栏内容的"下面"，而不是像网站上和 Bootstrap 网站示例中的其他内容一样显示得很好。似乎是z索引问题。：/似乎无论我如何使用它，都没有任何效果。
实际的模态代码从侧边栏移到了页面的顶部，我认为这样可以缓解大多数显示问题，我尝试在模态打开时使用规则覆盖画布外菜单的zindex，但失败了。
任何想法将不胜感激!
谢谢朱莉
引导模式...

<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>

关闭画布边栏...

<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>