BootstrapVueを愛用しているのですが、あるバージョン(2.0.0-rc28あたり)から、モーダル(b-modal)を開いたときに背景が真っ暗になる問題に悩まされました。

本来なら下のように背景が透過するはずなんですよね。

コードに問題がないように、添付のスクショは公式ドキュメントの最初のサンプルをそのまま使って再現しています。

<template>
  <div>
    <b-button v-b-modal.modal-1>Launch demo modal</b-button>

    <b-modal id="modal-1" title="BootstrapVue">
      <p class="my-4">Hello from modal!</p>
    </b-modal>
  </div>
</template>

真っ暗になる理由

本来はモーダル表示時の背景のかぶせ要素である<div class="modal-backdrop"></div>に、フェードイン時にclass="show"が付与され、class="show"にopacity（規定値は0.5）が定義されていることで透過するはずなのですが、このクラスが何故か付与されていないことがわかりました。

bootstrapのscss(_modal.scss)のコードはこちら。

// Modal background
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: $zindex-modal-backdrop;
  width: 100vw;
  height: 100vh;
  background-color: $modal-backdrop-bg;

  // Fade for backdrop
  &.fade { opacity: 0; }
  &.show { opacity: $modal-backdrop-opacity; }
}

こちらにこの問題についてのイシューがあり、ワタシエイゴガヨメナクテヨクワカラナイのですが、Bootstrap4系ではコードのサイズを削減するために、トランジションのスタイルがvueと完全に互換性がないとかなんとか・・

最低限の解決方法

で、最低限以下のスタイルを追記すれば一応、冒頭のとおり真っ黒事象は解決できました。

.modal-backdrop {
  opacity: 0.5;
}

トランジションを無視しており、正しい解決方法ではないことは承知ですが、真っ暗よりはマシですし、同じ問題に悩む私のような初心者もいるかもなあ・・と思って投稿しました。