1

オフ キャンバス サイドバー メニューを使用するブートストラップ サイトに取り組んでいます。このメニューは、アイテムがカートに追加されると、980px 未満の幅でカートの内容を含むミニバスケットを表示します。メニューの一番下にチェックアウトボタンがあります。このボタンは、ログイン/登録フォームのモーダルをトリガーします。このモーダルがトリガーされると、サイドバー メニューは開いたままになります。

問題: 実際のモーダル ボディ コンテンツは、サイトおよびブートストラップ サイト サンプルの他のすべてのコンテンツと同様に適切に表示されるのではなく、サイドバー コンテンツの「下」に表示されます。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