Question

我有一个弹出式模态窗口，它位于固定位置并具有设置的宽度和高度。它也集中在窗口上：

一切正常，除非窗口高度减少得足够多，div的一部分被切断，用户无法看到其全部内容：

有没有办法将滚动添加到父容器（也是固定的）以查看模态/ div的其余部分？

＆＃13;

<div id="popup-background">
  <div id="popup-modal">Lorem ipsum dolor sit amet, cu audiam prodesset sed, vitae recusabo expetenda mei ei. Mei an soluta sententiae, no vim deserunt signiferumque. Sint ocurreret no vim, alia inani dissentias eam cu. Velit oratio quo et. In omnis utinam lobortis qui, usu id deleniti reprehendunt comprehensam.

Mutat vituperatoribus quo et. Facer quodsi temporibus eu qui. Nam choro dicam partiendo te, ex volumus facilisi insolens mel, at sit iriure nostrum tractatos. Cu invidunt invenire pri, per ullum consequuntur ut. Per munere consul cu. Nam quod solum ea, vis nulla elaboraret quaerendum ut, ea qui malis senserit.

Homero ornatus molestiae at vix, usu ut vide conceptam accommodare. Quaestio iracundia in eam. Mel dictas scripta constituto no, no mea idque errem molestie. Per an case fabulas abhorreant, diam fabellas reprimique sea et. Ad constituam vituperatoribus vix, ut habeo legendos temporibus ius.

Iudico eripuit nec no, pri nonumy legendos reformidans id, ei facete sapientem has. Nam no omnes feugiat verterem, ad eos graeco denique. Ad mea errem intellegat. No tale dicta vivendo mei. Ea quo dictas discere, ut saperet epicurei ocurreret mea. Primis intellegat eu est, at vix quem quis iudico, vix ad detraxit delicata qualisque.
  </div>
</div>

＆＃13;

static void shuffle(int[] array) {
int n = array.length;
for (int i = 0; i < array.length; i++) {
    // Get a random index of the array past i.
    int random = i + (int) (Math.random() * (n - i));
    // Swap the random element with the present element.
    int randomElement = array[random];
    array[random] = array[i];
    array[i] = randomElement;
}
}

＆＃13;

Answer 1

像这样更新css

*{ margin:0; }

#popup-background
{
position:fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

#popup-modal
{
 padding: 20px;
 width:500px;
 max-height: 350px;
height :80%;
background: #EFEFEF;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
overflow-y: auto
}

http://jsfiddle.net/chauhangs/af142jg9/

Answer 2

如果您不希望模态可滚动，但整个页面改为：

CSS：

.background{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    top: 0px;
    left: 0px;
}

.modal_container{
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.modal_wrapper{
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.modal_content{
    background: white;
    position: relative;
    display: inline-block;
    padding: 20px;
    margin-top: 10px;
    vertical-align: middle;
    z-index: 999;
    max-width: 350px;
}

HTML：

<div class="background"></div>
<div class="modal_container">
    <div class="modal_wrapper">
        <div class="modal_content">
            MY CONTENT
        </div>
    </div>
</div>

但是要小心，打开模态时，你应该将 overflow：hidden 设置为 html 标签，因为如果你没有，你可以得到2个看起来很丑的滚动条。

Answer 3

在阅读@mokiSRB评论后，我将我的模态从固定更改为相对。然后我找到How do I vertically center align a position:relative element，建议将相对div包装两次：

.wrappert {
    height: 100%; 
    width: 100%;
    display: table;    
}
.wrapper {
    height: 100%;
    vertical-align: middle;
    display: table-cell;
    text-align: center;
}

经过一些小调整后，我最终得到了：http://jsfiddle.net/senju/ynjn2u7L/

＆＃13;

*{ margin:0; }

#popup-background
{
  position:fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow-y:auto;
}

#popup-modal
{
  padding: 20px;
  width:500px;
  height: 350px;
  background: #EFEFEF;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.wrappert {
  height: 100%; 
  width: 100%;
  display: table;    
}
.wrapper {
  height: 100%;
  vertical-align: middle;  
  display: table-cell;
}

＆＃13;

<div id="popup-background">
  <div class="wrappert">
    <div class="wrapper">
      <div id="popup-modal">Lorem ipsum dolor sit amet, cu audiam prodesset sed, vitae recusabo expetenda mei ei. Mei an soluta sententiae, no vim deserunt signiferumque. Sint ocurreret no vim, alia inani dissentias eam cu. Velit oratio quo et. In omnis utinam lobortis qui, usu id deleniti reprehendunt comprehensam.

Mutat vituperatoribus quo et. Facer quodsi temporibus eu qui. Nam choro dicam partiendo te, ex volumus facilisi insolens mel, at sit iriure nostrum tractatos. Cu invidunt invenire pri, per ullum consequuntur ut. Per munere consul cu. Nam quod solum ea, vis nulla elaboraret quaerendum ut, ea qui malis senserit.

Homero ornatus molestiae at vix, usu ut vide conceptam accommodare. Quaestio iracundia in eam. Mel dictas scripta constituto no, no mea idque errem molestie. Per an case fabulas abhorreant, diam fabellas reprimique sea et. Ad constituam vituperatoribus vix, ut habeo legendos temporibus ius.

Iudico eripuit nec no, pri nonumy legendos reformidans id, ei facete sapientem has. Nam no omnes feugiat verterem, ad eos graeco denique. Ad mea errem intellegat. No tale dicta vivendo mei. Ea quo dictas discere, ut saperet epicurei ocurreret mea. Primis intellegat eu est, at vix quem quis iudico, vix ad detraxit delicata qualisque.
      </div>
    </div>
  </div>
</div>

＆＃13;

如果溢出，滚动查看更多固定div？

3 个答案: