Как сделать модальный полноэкранный режим? - PullRequest
Новая
       6

Как сделать модальный полноэкранный режим?

0 голосов
/ 25 марта 2019

Я пытаюсь сделать начальную загрузку модальной во весь экран.Какие классы CSS я должен переопределить, я хочу сделать это в стиле scoped в компоненте, который будет использовать этот модальный.

1 Ответ

1 голос
/ 25 марта 2019

Вы хотите отредактировать .modal-dialog и принудительно указать размеры.

Пример CSS: 

.modal-dialog {
    max-width: 100%;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    display: flex;
}

Дополнительно, чтобы это работало vue.Вы можете попробовать добавить класс в b-modal и попробовать что-то вроде этого: 

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

  <!-- Modal Component -->
  <b-modal class="test-modal" id="modal1" title="BootstrapVue">
    <p class="my-4">Hello from modal!</p>
  </b-modal>
</div>

CSS: 

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