bvModalでネストしたモーダルを出す時にやったこと

bootstrapのモーダルはネストしたモーダルをサポートしてないので力技です

あとバージョンによって変わるかもなので参考程度で

Uncaught RangeError: Maximum call stack size exceeded.

`this.$bvModal.msgBoxConfirm`呼び出した時に出たエラー

これは親のモーダルにdata-focus=”false”を設定すればOK

モーダルが競合してしまう

エラーを解消してもz-indexの関係で親モーダルの後ろにモーダルが表示されてしまう時

id指定でmsgBoxConfirmを呼び出して、z-indexを設定する

// css #test___BV_modal_outer_ { z-index: 9999 !important; } //親より大きいindex

await this.$bvModal.msgBoxConfirm("message", {id: "test"})

しかしこの方法は推奨されていない

id指定呼び出しはテストでだけ使えと書いてある

https://github.com/bootstrap-vue/bootstrap-vue/blob/a1cebda1ef6e9579e742fdf3937a28643c8e31ec/src/components/modal/helpers/bv-modal.js#L35-L42

もう一つの方法はイベントを使って無理やりやる方法

      this.$root.$once("bv::modal::shown", (bvEvent, modalId) => {
        document.getElementById(`${modalId}___BV_modal_outer_`).style.zIndex =
          "9999"; //親より大きいindex
      })
      await this.$bvModal.msgBoxConfirm("message", {})

これのデメリットはonceからmsgboxconfirmまでの間に別のモーダル表示が挟まるとぴーやしてしまう所

babu

なんにせよ参考程度でオネシャス 👯

Bootstrap 5　フロントエンド開発の教科書