Javascript 垂直居中引导模式窗口

我想把我的模型放在视口的中心（中间），我试图添加一些css属性

 .modal { position: fixed; top:50%; left:50%; }   

我用这个例子

我试过了

$("#MyModal").modal('show').css(
    {
        'margin-top': function () {
            return -($(this).height() / 2);
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    })

---

top参数在.modal.fade.in中被重写要强制在自定义声明中设置值，请添加

！重要的

关键字位于顶部之后。这将强制浏览器使用该值并忽略关键字的任何其他值。这有一个缺点，即不能在其他任何地方覆盖该值

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
}

---

这就是我为我的应用程序所做的。如果您查看bootstrap.css文件中的以下类，modal对话框的默认填充为10px，@media screen和（最小宽度：768px）。modal对话框的顶部填充设置为30px。因此，在我的自定义css文件中，我将所有屏幕的顶部填充设置为15%，而不指定媒体屏幕宽度。希望这有帮助

.modal-dialog {
  padding-top: 15%;
}

---

这在BS3中有效，在v2中未测试。它使模态垂直居中。请注意，它将在那里转换-如果您希望它只出现在编辑CSS

转换

属性的

模式对话框

centerModal = function() {
    var $dialog = $(this).find(".modal-dialog"),
        offset = ($(window).height() - $dialog.height()) / 2;

    // Center modal vertically in window
    $dialog.css({
        'transform': 'translateY(' + offset + 'px) !important',
    });
};

$('.modal').on('shown.bs.modal', centerModal);
$(window).on("resize", function() {
    $('.modal').each(centerModal);
});

---

您可以在Bootstrap 3模式上实现垂直对齐中心，如下所示：

.modal-vertical-centered {
  transform: translate(0, 50%) !important;
  -ms-transform: translate(0, 50%) !important; /* IE 9 */
  -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

并将这个css类添加到“模态对话框”容器中

<div class="modal-dialog modal-vertical-centered">
...

...

---

jsFiddle工作示例：

因为gpcola的答案对我不起作用，所以我对它进行了一点编辑，现在就可以了。 我使用了“边距顶部”而不是变换。另外，我使用“show”而不是“show”事件，因为它给了我一个非常糟糕的定位跳跃（当你打开引导动画时可见）。在定位之前，请确保将显示设置为“块”，否则$dialog.height（）将为0，并且模式不会完全居中

(function ($) {
    "use strict";
    function centerModal() {
        $(this).css('display', 'block');
        var $dialog  = $(this).find(".modal-dialog"),
        offset       = ($(window).height() - $dialog.height()) / 2,
        bottomMargin = parseInt($dialog.css('marginBottom'), 10);

        // Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
        if(offset < bottomMargin) offset = bottomMargin;
        $dialog.css("margin-top", offset);
    }

    $(document).on('show.bs.modal', '.modal', centerModal);
    $(window).on("resize", function () {
        $('.modal:visible').each(centerModal);
    });
}(jQuery));

（函数（$）{
“严格使用”；
函数centerModal（）{
$（this.css（'display'，'block'）；
var$dialog=$（this.find（“.modal dialog”），
偏移量=（$（窗口）.height（）-$dialog.height（））/2，
bottomMargin=parseInt（$dialog.css（'marginBottom'），10）；
//确保不隐藏带有负边距的模式的顶部（如果它长于屏幕高度），并保持边距等于模式的底部边距
如果（偏移量<底部边距）偏移量=底部边距；
$dialog.css（“页边距顶部”，偏移量）；
}
$（document）.on（'show.bs.modal'，'.modal'，centerModal）；
$（窗口）。打开（“调整大小”，函数（）{
$（'.modal:visible'）。每个（centerModal）；
});
}（jQuery））；
e（document）.on（'show.bs.modal'，function（）{
如果（$winWidth<$（窗口）.width（））{
$（'body.modal open、.navbar fixed top、.navbar fixed bottom'）.css（'marginRight'，$（window.width（）-$winWidth）
}
});
e（文档）.on（'hidden.bs.modal'，函数（）{
$（'body，.navbar fixed top，.navbar fixed bottom'）.css（'marginRight'，0）
});
这将接受Arany的答案，并使其在模式高于屏幕高度时工作：

function centerModal() {
    $(this).css('display', 'block');
    var $dialog = $(this).find(".modal-dialog");
    var offset = ($(window).height() - $dialog.height()) / 2;
    //Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
    var bottomMargin = $dialog.css('marginBottom');
    bottomMargin = parseInt(bottomMargin);
    if(offset < bottomMargin) offset = bottomMargin;
    $dialog.css("margin-top", offset);
}

$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
    $('.modal:visible').each(centerModal);
});

函数中心模式（）{
$（this.css（'display'，'block'）；
var$dialog=$（this.find（“.modal dialog”）；
变量偏移=（$（窗口）.height（）-$dialog.height（））/2；
//确保不隐藏带有负边距的模式的顶部（如果它长于屏幕高度），并保持边距等于模式的底部边距
var bottomMargin=$dialog.css（'marginBottom'）；
bottomMargin=parseInt（bottomMargin）；
如果（偏移量<底部边距）偏移量=底部边距；
$dialog.css（“页边距顶部”，偏移量）；
}
$（'.modal'）。on（'show.bs.modal'，centerModal）；
$（窗口）。打开（“调整大小”，函数（）{
$（'.modal:visible'）。每个（centerModal）；
});
使所有对话框中间完全对齐

/*注:

1.即使您不需要指定选择器，它也会从文档中找到所有模态，并使其垂直居中

2.为了避免中间某些特定模式成为it中心，您可以在click事件中使用：not selector

*/

Milan Pandya将垂直模态居中添加到bootstrap modal.js中，我在modal.prototype.show
函数的末尾添加了这个：

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="table">
        <div class="table-cell">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

var $modalDialog = $('.modal-dialog'),
        modalHeight = $modalDialog.height(),
        browserHeight = window.innerHeight;

    $modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2});

这就是工作：

它使用一个helper div和一些自定义css。不需要javascript或jQuery

HTML（基于引导）

我为所有HTML5浏览器找到的最佳方式：

body.modal-open .modal {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal .modal-dialog {
    margin: auto;
}

我的选择，只是一点CSS：（不适用于IE8）

您可以使用第一条规则来更改模态的显示方式

使用：bootstrap3.3.4
又一个CSS解决方案。
不适用于大于视图端口的弹出窗口

.modal-dialog {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 0;
    margin-bottom: 0; 
}
.modal.fade .modal-dialog {
    transition: top 0.4s ease-out;
    transform: translate(0, -50%);
    top: 0;
}
.modal.in .modal-dialog {
    transform: translate(0, -50%);
    top: 50%;
}

在
.model对话框中
类将位置覆盖为绝对（从相对）并将内容居中
右：0，左：0

在
.modal.fade.modal对话框中，.modal.In.modal对话框
将过渡动画设置在
顶部
而不是平移上

页边距顶部
如果弹出窗口较小，则将弹出窗口稍微移到中心下方；如果弹出窗口较长，则模式会与页眉卡住。因此
页边距顶部：0，页边距底部：0

需要进一步完善它。
只需将以下CSS添加到现有的CSS中，对我来说效果很好

.modal {
  text-align: center;
}
@media screen and (min-width: 768px) {
    .modal:before {
      display: inline-block;
      vertical-align: middle;
      content: " ";
      height: 100%;
    }
}
.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

基于，但也占页面滚动

(function($) {
    "use strict";
    function positionModals(e) {
        var $this = $(this).css('display', 'block'),
            $window = $(window),
            $dialog = $this.find('.modal-dialog'),
            offset = ($window.height() - $window.scrollTop() - $dialog.height()) / 2,
            marginBottom = parseInt($dialog.css('margin-bottom'), 10);

        $dialog.css('margin-top', offset < marginBottom ? marginBottom : offset);
    }

    $(document).on('show.bs.modal', '.modal', positionModals);

    $(window).on('resize', function(e) {
        $('.modal:visible').each(positionModals);
    });
}(jQuery));

（函数（$）{
“严格使用”；
函数位置模态（e）{
var$this=$（this）.css（'display'，'block'），
$window=$（window），
$dialog=$this.find（'.modal dialog'），
偏移量=（$window.height（）-$window.scrollTop（）-$dialog.height（））/2，
marginBottom=parseInt（$dialog.css（'margin-bottom'），10）；
$dialog.css（'margin-top'，offset
最干净、最简单的方法就是使用Flexbox！以下内容将进行分析：
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

body.modal-open .modal {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal .modal-dialog {
    margin: auto;
}

.modal.fade .modal-dialog {
    transform: translate(-50%, -80%);
}

.modal.in .modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0px;
}

.modal-dialog {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 0;
    margin-bottom: 0; 
}
.modal.fade .modal-dialog {
    transition: top 0.4s ease-out;
    transform: translate(0, -50%);
    top: 0;
}
.modal.in .modal-dialog {
    transform: translate(0, -50%);
    top: 50%;
}

.modal {
  text-align: center;
}
@media screen and (min-width: 768px) {
    .modal:before {
      display: inline-block;
      vertical-align: middle;
      content: " ";
      height: 100%;
    }
}
.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

(function($) {
    "use strict";
    function positionModals(e) {
        var $this = $(this).css('display', 'block'),
            $window = $(window),
            $dialog = $this.find('.modal-dialog'),
            offset = ($window.height() - $window.scrollTop() - $dialog.height()) / 2,
            marginBottom = parseInt($dialog.css('margin-bottom'), 10);

        $dialog.css('margin-top', offset < marginBottom ? marginBottom : offset);
    }

    $(document).on('show.bs.modal', '.modal', positionModals);

    $(window).on('resize', function(e) {
        $('.modal:visible').each(positionModals);
    });
}(jQuery));

body.modal-open .modal.in {
  display: flex !important;
  align-items: center;
}

// The 3 below classes have been placed to make the modal vertically centered
.modal-open .modal{
    display:table !important;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}

.modal-dialog{
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog centered modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

.modal .modal-dialog.centered {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

var modalVerticalCenterClass = ".modal";

function centerModals($element) {
    var $modals;
    if ($element.length) {
      $modals = $element;
    } else {
    $modals = $(modalVerticalCenterClass + ':visible');
}
$modals.each( function(i) {
    var $clone = $(this).clone().css('display', 'block').appendTo('body');
    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
    top = top > 0 ? top : 0;
    $clone.remove();
    $(this).find('.modal-content').css("margin-top", top);
});
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
    centerModals($(this));
});
$(window).on('resize', centerModals);

/* scroll fixes */
.modal-open .modal {
  padding-left: 0px !important;
  padding-right: 0px !important;
  overflow-y: scroll;
}

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%);
}

body.modal-open .modal[style]:not([style='display: none;']) {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal[style]:not([style='display: none;']) .modal-dialog {
    margin: auto;
}

.modal {
   height: 100%;
   width: 100%;
}

.modal-content {
   margin: 0 auto;
   max-height: 600px;
   max-width: 50%;
   overflow: auto;
   transform: translateY(-50%);
}

.modal.fade.in {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal.fade.in .modal-dialog {
    width: 100%;
}

.centralize{
   position:absolute;
   left:50%;
   top:50%;

   background-color:#fff;
   transform: translate(-50%, -50%);
   width: 40%; //specify watever u want
   height: 50%;
   }

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

modal-dialog-centered

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>