web-dev-qa-db-fra.com

Comment centrer le modal au centre de l'écran?

Comment centrer le modal au centre de l'écran? Ceci est mon code html et js Cela fonctionne dans Chrome, mais quand je rafraîchis cette page - cela ne fonctionne pas

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

Un moyen simple de résoudre

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

Il n'y a pas besoin de jQuery, vous pouvez le faire en utilisant simplement 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>

Si vous préférez la solution jQuery la voici:

$(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>
7
xxxmatko

Essayez comme ça

.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;
}

si vous préférez jquery, essayez ceci

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'));
  }
});
4
saravanajd

Essayez quelque chose comme:

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

Ajoutez le code ci-dessous dans le fichier js. Remarque: le changement de "#mydialog" dans votre sélecteur (classe de dialogue ou ID)

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

Merci, Anand.

0
anand vishwakarma