1

我正在开发一个使用非画布侧边栏菜单的引导站点。将商品添加到购物车后，此菜单会显示一个小购物篮，其中购物车内容的宽度小于 980 像素。菜单底部是一个结帐按钮。该按钮触发登录/注册表单的模式。触发此模式时，侧边栏菜单保持打开状态。

问题：实际的模态正文内容显示在侧边栏内容的“下方”，而不是与站点和引导站点示例上的所有其他内容一样好。z-index 问题似乎是这样。:/ 似乎无论我如何玩它，都没有任何效果。

实际的模态代码已从侧边栏移至页面顶部。我的想法是，这应该可以缓解大多数显示问题。当模式打开但失败时，我尝试使用规则覆盖关闭画布菜单的 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>
4

1 回答 1

1

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

offcanvas z-index为 1050

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

.my-product-review-modal {
  z-index: 1800;
}
于 2021-01-04T11:05:36.587 回答