如何使对话框覆盖整个屏幕

Question

我在这里遵循这个角度灯箱教程。 当我将按钮放入div 中时，灯箱只会扩展到div 的大小。 我的代码看起来像这样：

<div class='newPen'>
  <div ng-app='mean.items' ng-controller='MyCtrl'>
    <button ng-click='toggleModal()'>Open Modal Dialog</button>
    <modal-dialog show='modalShown' width='1000px' height='1000px'>
      <p>Modal Content Goes here<p>
    </modal-dialog>
  </div>
</div>

但灯箱仅显示在div 中。 如何使灯箱显示整个页面？

如果您需要更多信息，请告诉我。

编辑：

这是我制作的一个jsbin。 在示例中，由于位置绝对，模型框被搞砸了。 问题是在我的代码中，我有一堆 css 绝对位置......那么无论如何，我可以让模态框覆盖整个屏幕，同时保持父div 的绝对位置吗？

Answer 1

尝试将其添加到您的 CSS 中

.ng-modal-dialog {
  width: 100% !important;
  height: 100% !important;
}

希望这有帮助...