Как сделать чтобы модальное окно выводилось по центру экрана? Я выравниваю через 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">×</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>
