javascript - 如果溢出,滚动查看更多固定 div?

标签 javascript jquery html css

我有一个弹出模式窗口,其位置固定且具有设定的宽度和高度。它也以窗口为中心:

enter image description here

一切正常,除非窗口高度降低得足够远,部分 div 被切断,用户无法看到其所有内容:

enter image description here

有没有办法向父容器添加滚动(也是固定的)以查看模态/div 的其余部分?

这是JSFiddle

*{ margin:0; }

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

#popup-modal
{
  padding: 20px;
  width:500px;
  height: 350px;
  background: #EFEFEF;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
<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>

最佳答案

像这样更新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/

关于javascript - 如果溢出,滚动查看更多固定 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34098195/

相关文章:

javascript - 如何检查多个相等语句?

javascript - 获取输入元素的 keyup 上未定义的函数

javascript - 我可以保护我的网站免受客户端广告注入(inject)吗?

javascript - 我的 AJAX 只触发一次,

javascript - 如何使用 jquery 隐藏基于子类名的表行?

javascript - NVDA 在动态更新后读取 aria-hidden 内容

jquery - 缩小 Bootstrap

PHP/MYSQL : A removed row is still displayed in my page after a reload

html - 跨度溢出 : hidden; doesn't show up in Firefox

javascript - 为什么在某些情况下单击鼠标中键不会触发 'click'?