モーダルフルスクリーンを作る方法は？

Question

bootstrapvueモーダルフルスクリーンを作ろうとしています。どのCSSクラスを上書きする必要があります。このモーダルを使用するコンポーネントのスコープスタイルでこれをしたいです。

Answer 1

承認された答えを拡張するには、外部モーダルDIVにクラスを適用することでこのローカルに適用するには、通常のようなクラスを与えるのではなく、コンポーネントのmodal-classプロパティを使用する必要があります。

https://bootstrap-vue.org/docs/components/modal#variations

JS：

<b-modal modal-class="modal-fullscreen">
    ...
</b-modal>

CSS：

.modal-fullscreen .modal-dialog {
    max-width: 100%;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    display: flex;
    position: fixed;
    z-index: 100000;
}