Question

我正在使用一个使用非画布边栏菜单的引导网站。一旦项目被添加到购物车，此菜单显示一个宽度小于980px的推车内容的迷你小块。菜单底部是结帐按钮。该按钮触发登录/注册表单的模态。触发此模态时，侧边栏菜单保持打开状态。

问题：实际的模态正文内容显示在侧边栏内容的“下方”，而不是像网站上的所有其他内容和引导网站示例一样显示。似乎是一个z指数问题。：/似乎无论我怎么玩它，什么都没有用。

实际的模态代码已从侧边栏移动到页面顶部。我的想法是，这应该可以缓解大多数显示问题。当模态打开但是失败时，我尝试使用规则来覆盖非画布菜单的zindex。

任何想法都将不胜感激！

谢谢！朱莉

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>

关闭拉票边栏...

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

Answer 1

我向我的模态添加了一个 z-index，它比 offcanvas 侧边栏容器大。这对我有用！

offcanvas z-index 是 1050

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

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

关闭画布侧边栏打开时的Bootstrap模式

1 个答案: