it-swarm.com.ru

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

Как отцентрировать модальный центр экрана? Это мой код html и js Он работает в консоли Chrome, но когда я обновляю эту страницу - он не работает

$('.modal').css('top', $(window).outerHeight() / 2 - ($(".modal-dialog").outerHeight()) / 2 + 'px');
3
Vlad Udod

Нет необходимости в jQuery , это можно сделать, просто используя css:

body {
  background: gray;
}

.modal {
  background: green;
  position: absolute;
  float: left;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div class="modal">
  Lorem ipsum
</div>

Если вы предпочитаете jQuery вот решение:

$(function() {
  var modal = $(".modal");
  var body = $(window);
  // Get modal size
  var w = modal.width();
  var h = modal.height();
  // Get window size
  var bw = body.width();
  var bh = body.height();
  
  // Update the css and center the modal on screen
  modal.css({
    "position": "absolute",
    "top": ((bh - h) / 2) + "px",
    "left": ((bw - w) / 2) + "px"
  })
});
body {
  background: gray;
}

.modal {
  background: green;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal">
  Lorem ipsum
</div>

6
xxxmatko

Простой способ решить

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
4
Vlad Udod

Попробуй вот так

.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

если вы предпочитаете jquery, попробуйте это 

function setModalMaxHeight(element) {
  this.$element     = $(element);  
  this.$content     = this.$element.find('.modal-content');
  var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
  var dialogMargin  = $(window).width() < 768 ? 20 : 60;
  var contentHeight = $(window).height() - (dialogMargin + borderWidth);
  var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
  var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
  var maxHeight     = contentHeight - (headerHeight + footerHeight);

  this.$content.css({
      'overflow': 'hidden'
  });

  this.$element
    .find('.modal-body').css({
      'max-height': maxHeight,
      'overflow-y': 'auto'
  });
}

$('.modal').on('show.bs.modal', function() {
  $(this).show();
  setModalMaxHeight(this);
});

$(window).resize(function() {
  if ($('.modal.in').length != 0) {
    setModalMaxHeight($('.modal.in'));
  }
});
2
saravanajd

Попробуйте что-то вроде:

$('.modal').css('margin-top', (Math.floor((window.innerHeight - $('.modal')[0].offsetHeight) / 2) + 'px');
0
Jim

Добавьте приведенный ниже код в файл js . Примечание: "#mydialog" изменить на ваш селектор (класс диалога или ID) 

$(function() {
    $(window).resize(function(event) {
        $('#mydialog').position({
                my: 'center',
                at: 'center',
                of: window,
                collision: 'fit'
	         });
	    });
});	

Спасибо, Ананд.

0
anand vishwakarma