Как позиционировать по центру?

Question

[darkglare]

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Запустить модальное окно
</button>

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

Здравствуйте. Почему окно всплывает сверху экрана ,а не в центре. Код скопировал с оф.страницы bootstrap для модального окна, который позиционируется вертикально по центру.

Answer 1

[YavaDev]

Цитата с bootsrtap документации

Добавьте .modal-dialog-centered в .modal-dialog чтобы вертикально центрировать модальное окно.

Comments

[darkglare]

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Тоже не помогло
Я же правильно добавил modal-dialog-centered в div class

[YavaDev]

darkglare, да, верно.
Вот https://codepen.io/YavaDev/pen/dyXrVVX у меня же работает.
Если у вас не работает, значит, скорее всего, ваши стили перебивают стили бутсрапа. В таком случае надо смотреть ваш код.

[Сергей delphinpro]

darkglare, правильно, и

оно работает

было бы странно, если бы не работало=)
А если все же не работает — нужно смотреть в инспектор, какие стили применяются или не применяются, а потом уже делать выводы, почему не работает.

[darkglare]

Сергей delphinpro, решил задав классу modal-dialog - margin-top:250px;

[YavaDev]

darkglare, это не решение, это костыль, так как размеры экрана у всех разные.
Еще такой вопрос, а какая версия Bootstrap у вас?

[Сергей delphinpro]

darkglare, ха-ха =))
а если всё-таки поковыряться в инспекторе и выяснить причину?

[darkglare]

Сергей delphinpro, не против, если натолкнете на место где искать (я не силен в bootstrap, просто скопировал код ),поэтому расскажите подробней что и где искать)

[darkglare]

YavaDev, версия 4.0.0

[YavaDev]

darkglare, в 4 версии должно работать. Тогда, что бы понять почему не работает, надо видеть код. Без этого никак не помочь.

[darkglare]

YavaDev, могу вам сюда скинуть код. Код html нужен?

[Сергей delphinpro]

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

[YavaDev]

darkglare, надо видеть верстку, залейте на хостинг или в крайнем случае в песочницу https://codepen.io/. Сюда скидывать код не нужно.

[darkglare]

Сергей delphinpro, https://codepen.io/olegfe/pen/ExyMobp главное тут все прекрасно работает

переходите в ОТЗЫВЫ- ОСТАВИТЬ ОТЗЫВ

[darkglare]

YavaDev, Решил

[darkglare]

Всем спасибо за участие!)