Bootstrap 3模态垂直位置中心 [英] Bootstrap 3 modal vertical position center

问题描述

这是一个分为两部分的问题:

This is a two part question:

1. 当不知道模态的确切高度时，如何将模态垂直放置在中心?

1. How can you position the modal vertically in the center when you don't know the exact height of the modal?

是否可以使模态居中并在模态主体中具有overflow:auto，但前提是模态超过屏幕高度?

Is it possible to have the modal centered and have overflow:auto in the modal-body, but only if the modal exceeds the screen height?

我尝试使用此功能:

.modal-dialog {
  height: 80% !important;
  padding-top:10%;
}

.modal-content {
  height: 100% !important;
  overflow:visible;
}

.modal-body {
  height: 80%;
  overflow: auto;
}

当内容远大于垂直屏幕尺寸时，这给了我所需的结果，但是对于较小的模态内容却几乎无法使用.

This gives me the result I need when the content is much larger than vertical screen size, but for small modal contents it's pretty much unusable.

推荐答案

我想出了一个纯CSS解决方案！不过它是css3，表示不支持ie8或更低版本，但除此之外，它已经过测试并可以在ios，android，ie9 +，chrome，firefox，桌面浏览器上使用..

I came up with a pure css solution! It's css3 though, which means ie8 or lower is not supported, but other than this it's tested and working on ios, android, ie9+, chrome, firefox, desktop safari..

我正在使用以下CSS:

I am using the following css:

.modal-dialog {
  position:absolute;
  top:50% !important;
  transform: translate(0, -50%) !important;
  -ms-transform: translate(0, -50%) !important;
  -webkit-transform: translate(0, -50%) !important;
  margin:auto 5%;
  width:90%;
  height:80%;
}
.modal-content {
  min-height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0; 
}
.modal-body {
  position:absolute;
  top:45px; /** height of header **/
  bottom:45px;  /** height of footer **/
  left:0;
  right:0;
  overflow-y:auto;
}
.modal-footer {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

这是一个小提琴. http://codepen.io/anon/pen/Hiskj

..选择此为正确答案，因为在出​​现多个模式时，没有多余的JavaScript会使浏览器屈服.

..selecting this as the correct answer since there's no extra heavy javascript that brings the browser to its knees in case of more than one modals.

这篇关于Bootstrap 3模态垂直位置中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！