如何使用CSS使模态叠加可滚动

Question

当我的模态长度超过当前视图的高度时，如何使我的叠加层可滚动？

我的叠加层目前有以下CSS：

.ngdialog-overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  -webkit-animation: ngdialog-fadein 0.5s;
  animation: ngdialog-fadein 0.5s;
}

如果我删除了top，right，bottom和left属性，我可以在模态外滚动就好了，但是我没有任何叠加可见。

我在SO中找到的大多数解决方案都使用上面的代码（除了-webkit和动画），但它对我不起作用。

Answer 1

你试过溢出：auto;在对话框上？

.ngdialog-overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  -webkit-animation: ngdialog-fadein 0.5s;
  animation: ngdialog-fadein 0.5s;
  overflow: auto;
}