1

我正在使用来自 twitter bootsrap 的“高”模式。是否可以使用较低的分辨率进行缩放？如果我选择较低的分辨率，我将看不到整个模态。无论如何，我希望它适合屏幕。如果它不适合我希望它是可滚动的（实际上有时会发生 /max-height: 400px）。我唯一能做的就是调整最大高度吗？

.modal-body {
  max-height: 400px;
  padding: 15px;
  overflow-y: auto;
}


.modal {
  position: fixed;
  top: 30%;
  left: 50%;
  z-index: 1050;
  width: 750px;
  margin: -250px 0 0 -280px;
  overflow: auto;
  background-color: #ffffff;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.3);
  *border: 1px solid #999;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding-box;
          background-clip: padding-box;
}
4

2 回答 2

1

尽管建议的解决方案有效，但当您使用position: absolute时，如果窗口的滚动条低于该值（即顶部不在视线范围内），则模式会显示自身，然后滚动条会“跳”到它的顶部。

另一种选择是根据窗口的高度调整模式的高度。为此，只需添加以下规则：

/* Since the position of the modal is top: 10%, this rules guarantees that its
centered vertically */
div.modal.fade.in { height: 80%; }

/* This rule shows the footer at the bottom of the modal and sets its width
so it looks good */
div.modal div.modal-footer{
    position: absolute;
    width: 94%;
    bottom: 0px;
}

/* Finally, we set the bottom of the body so its above the footer 
and its top so its bellow the header of the modal */
div.modal div.modal-body{
    position: absolute;
    width: 94%;
    top: 50px;
    bottom: 60px;
}

希望能帮助到你

于 2013-11-03T07:45:20.487 回答
0 
.modal {
    position: absolute; 
}
于 2012-06-29T07:55:52.363 回答