Javascript 如何将模态居中到屏幕中心？

How to center modal to the center of screen?

提问by Vlad Udod

How to center modal to the center of screen? This is my html and js code It works in Chrome console, but when I refresh this page - it doesn't work

如何将模态居中到屏幕中心？这是我的 html 和 js 代码它在 Chrome 控制台中工作，但是当我刷新此页面时 - 它不起作用

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

回答by Vlad Udod

Easy way to solve

简单的解决方法

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

回答by xxxmatko

There is no need for jQuery, you can accomplish that just using css:

不需要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>

If you prefer jQuerysolution here is it:

如果您更喜欢这里的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>

回答by saravanajd

Try like this

像这样尝试

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

if you prefer jquery means try this

如果你更喜欢 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'));
  }
});

回答by Mwibutsa Floribert

I had the same issue but I solved it in a weird way if you would like to have a look.

我有同样的问题，但如果你想看看，我以一种奇怪的方式解决了它。

.modal {
 position: fixed;
  width: 100%;
  height: 100vh;
  background-color: #07070767;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

回答by Jim

Try something like:

尝试类似：

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

回答by anand vishwakarma

Add below code in js file. Note: "#mydialog" change to your selector(Dialog class or ID)

在js文件中添加以下代码。注意：“#mydialog”更改为您的选择器（对话框类或 ID）

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

Thanks, Anand.

谢谢，阿南德。