Как показать модальное диалоговое окно Bootstrap в центре экрана на всех браузерах и на всех устройствах?

Question

Я использую модальный диалог Bootstrap, чтобы показать некоторую информацию во всплывающем окне. Но проблема, с которой я сталкиваюсь, заключается в том, что я не могу показать это всплывающее окно в центре экрана. Я хочу показать это всплывающее окно в центре экрана на всех браузерах и на всех устройствах.

Для этого я попробовал следовать CSS-коду, но у меня это не сработало:

.modal { 
  width: 100%;
  left: 0;
  background-color: transparent; }

.modal-body { 
  display: inline-block; 
  background-color: #FFF; }



.modal img { min-width: none!important; }

Ниже приведена ссылка, если вы хотите протестировать: http://smartrebate.eywaharvest.com/ Там, нажав на любую из деталей зеленого цвета, вы сможете увидеть модальное всплывающее окно. Я хочу это всплывающее окно в центре экрана.

Может кто-нибудь, пожалуйста, помогите мне в этом отношении? Заранее спасибо.

Answer 1

Я бы рекомендовал дать Bootstrap Modal Расширение попробовать:

Расширяет модальный класс Bootstrap по умолчанию. Отзывчивый, наращиваемый, AJAX и многое другое. - GitHub

Центрированный, отзывчивый модальный диалог был одним из важных требований для одного из моих проектов пару лет назад. Поэтому я начал использовать расширение и полностью забыл плагин по умолчанию и его проблемы (такие как фоновая прокрутка).

Это действительно легко установить. Смотрите демо-версию здесь.

Answer 2

Попробуйте удалить эти строки из вашего индекса. И посмотри, что случилось.

.modal { 
  width: 100%;
  left: 0;
  background-color: transparent; 
}

.modal-body { 
  display: inline-block; 
  background-color: #FFF; 
}

.modal img { 
  min-width: none!important; 
}

Answer 3

Попробуй это

$(".modal").css({
'margin-top': function () { //Vertical centering
    return -($(this).height() / 2);
},
'margin-left': function () { //Horizontal centering
    return -($(this).width() / 2);
}
});