@Sushkov
">alert("yohoho")

Как выравнять модальное окно вертикально по центру?

Как сделать чтобы модальное окно выводилось по центру экрана? Я выравниваю через js, но так как окно скрыто по умолчанию то ничего не выходит, но если при открытом окне изменить размер окна то он центрируется. Попробовал сделать вот так:
$('#myModal').on('shown.bs.modal', function(){
   $(window).resize();
        
});
но это не очень красиво получается.
<html>
<head>
<meta charset="utf-8">
<title>{{name}}</title>
<link href="https://yastatic.net/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<script src="https://yastatic.net/jquery/2.1.4/jquery.js"></script>
<script src="https://yastatic.net/bootstrap/3.3.4/js/bootstrap.min.js"></script>\
<script>

$(document).ready(function(){
		
    $('#myModal').on('shown.bs.modal', function(){
   $(window).resize();
        
});
 $(window).resize(function(){

     console.log($(window).height()+"Высота div: " + $('.className').height());
  $('.className').css({
   position:'absolute',
   left: ($(window).width() 
     - $('.className').outerWidth())/2,
   top: ($(window).height() 
     - $('.className').outerHeight())/2
  });
		
 });
 
 // To initially run the function:
 $(window).resize();

});    
    
</script>
</head>
<body>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Посмотреть демо
      </button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog className">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Название модали</h4>
      </div>
      <div class="modal-body">
        sdfsd
          fsd<br>
        f
        sd<br>
        f
        sd<br>
        fsdfsdfsdfsdfwerfAsasdasdфывфыв
        фывфывфыв
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>
  • Вопрос задан
  • 13712 просмотров
Решения вопроса 1
@mr_ko
Javascript, Node.js. React.js, Vue.js, Wordpress
Вот такие CSS стили выровняют ровно по центру. Причем ширина и высота не важны (ели они канечно не больше экрана)
.modal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
petermzg
@petermzg
Самый лучший программист
var win = $(window);
var xy = (win.width() - dlg.width()) / 2;
dlg.css('left', xy +'px');
xy = (win.height() - dlg.height()) / 2;
dlg.css('top', xy +'px');
Ответ написан
@Dinamokid
Добавьте .modal-dialog-centered к .modal-dialog
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы