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

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

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

尝试以下方法：

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

简单的解决方法

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

---

无需使用jQuery，只需使用css即可：

正文{
背景：灰色；
}
.莫代尔{
背景：绿色；
位置：绝对位置；
浮动：左；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}

乱数假文

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

$（函数（）{
$（窗口）。调整大小（函数（事件）{
$（'#mydialog'）。位置({
我的‘中心’，
在‘中心’，
窗户，
碰撞：“适合”
});
});
});

像这样试试

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

函数setModalMaxHeight（元素）{
此.$element=$（element）；
this.$content=this.$element.find（'.modal content'）；
var borderWidth=this.$content.outerHeight（）-this.$content.innerHeight（）；
var dialogMargin=$（窗口）.width（）<768？20:60；
var contentHeight=$（窗口）.height（）-（对话框边距+边框宽度）；
var headerHeight=this.$element.find（'.modal header'）.outerHeight（）| | 0；
var footerHeight=this.$element.find（'.modal footer'）.outerHeight（）| | 0；
var maxHeight=内容高度-（页眉高度+页脚高度）；
这是$content.css({
“溢出”：“隐藏”
});
这是$element
.find（'.modal body'）.css({
“最大高度”：最大高度，
“溢出-y”：“自动”
});
}
$（'.modal'）.on（'show.bs.modal'，function（）{
$（this.show（）；
setModalMaxHeight（这个）；
});
$（窗口）。调整大小（函数（）{
如果（$（'.modal.in'）.length！=0）{
setModalMaxHeight（$（'.modal.in'））；
}
});

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

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

---

纯Javascript

此代码在所有场景中都有帮助

 var setDivCenter = function (classORid) {

        var div = document.querySelector(classORid);

        var Mwidth = div.offsetWidth;
        var Mheight = div.offsetHeight;
        var Wwidth = window.innerWidth;
        var Wheight = window.innerHeight;

        div.style.position = "absolute";
        div.style.top = ((Wheight - Mheight ) / 2 +window.pageYOffset ) + "px";
        div.style.left = ((Wwidth - Mwidth) / 2 +window.pageXOffset ) + "px";

    };

---

如果您使用的是引导模式，那么只需将以.modal对话框为中心的类添加到模式对话框中即可。见下文

更改此行

---

对于这一行，如果在左侧CSS属性上使用CSS calc（）函数，则将模态居中是相当简单的。假设模态的宽度为600px。您可以使用屏幕宽度的50%减去模式宽度的一半。下面这个例子的模态为600px，所以我的calc（）函数为50%-300px

#modal {
   position:  fixed;
   width: 600px;
   top: 40px;
   left: calc(50% - 300px);
   bottom: 40px;
   z-index: 100;
}

---

您应该按照以下方式重写modals和modals对话框的css类：

.modal-dialog {
  display: flex !important;
  width: 50% !important;
  pointer-events: none;
  justify-content: center;
  align-items: center;
}
.modal{
  display:flex !important;
}

---

你在使用引导程序吗？如果是，纯JavaScript:jQuery中的position方法不接受参数。下面是一个JS文件箱，演示了您的代码的运行。请修改或更新您的答案。

Float:left

？：）当我滚动时，模式不会移动-它不会停留在视口的中心。仅CSS解决方案对我有效。非常整洁！结果是一个模糊的文本。如果一个div中有太多的内容，而你不希望它的顶部突出框架，你应该添加

max height:90%它对我有效