Как сделать бутстрап модальным для вертикального выравнивания: верх - PullRequest
Новая
       10

Как сделать бутстрап модальным для вертикального выравнивания: верх

0 голосов
/ 24 августа 2018

Я использую мод начальной загрузки с патчем Boostrap 3 для начальной загрузки.Модал хорош после этого патча.Но мне нужно выровнять его вертикально сверху, а не посередине.

У патча Boostrap 3 ниже css, что делает его отображаемым вертикально посередине, но мне нужен вертикальный верхний компоновщик, пожалуйста, предложите. 

body.modal-open, 
.modal-open .navbar-fixed-top, 
.modal-open .navbar-fixed-bottom {
  margin-right: 0;
}

.modal {
  left: 50%;
  bottom: auto;
  right: auto;
  z-index: 1050;
  padding: 0;
  width: 500px;
  margin-left: -250px;
  background-color: #ffffff;
  border: 1px solid #999999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
}

.modal.container {
  max-width: none;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
}

1 Ответ

0 голосов
/ 25 августа 2018

По умолчанию, модалы выровнены по вертикали с верхом в Bootstrap 3. Неясно, чего вы пытаетесь достичь своим патчем. Если вы хотите сделать что-то нестандартное, начните с просмотра исходного кода. Если у вас его еще нет, вы можете скачать его здесь . Это путь к нужному файлу: bootstrap-3.3.7> less> modals.less.

Ваш код не соответствует структуре исходного кода Bootstrap 3. В комментариях вверху файла modals.less кратко изложены цели основных модальных классов:

// .modal-open - класс тела для убийства свитка

// .modal - контейнер для прокрутки в пределах

// .modal-dialog - позиционирующая оболочка для самого модального

// .modal-content - актуальный модальный ш / б, углы и дерьмо

Редактировать: просмотрев живой сайт, на который вы ссылались в комментариях, вам не хватает некоторых тегов div в вашем HTML, которые реализуют правила стилей .modal-dialog и .modal-content. Похоже, ваш патч пытается компенсировать те классы Bootstrap, которые вы пропустили. Хотя в большинстве случаев это выглядит нормально, это приводит к тому, что ваши модалы отображаются некорректно, и их поведение и позиционирование намного сложнее настраивать и прогнозировать.

Вот простой модальный пример, показывающий, как нужно структурировать HTML, который я скопировал из документации Bootstrap 3 : 

<!-- Modal -->
<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Если вы удалите свои модальные патчи и выполните шаблон, приведенный в коде выше, вы должны получить желаемые результаты.

Надеюсь, это поможет. Желаем удачи.

...