使 div 显示在 Angular UI 模态之外

Question

In this plunk 我有一个 Angular UI 模态，模态里面有一个 div，但是因为它有 position:fixed 我期待div在外面覆盖整个屏幕。为什么它在模态内部以及如何使其工作？请注意 div 必须在模态框内。

HTML

<style>
  .app-modal .modal-dialog {
      width: 260px;
      height:100px;
    }
  div#background {
      position:fixed;
      top:0;
      left:0;
      height:100%;
      width:100%;
      background-color:orange;
  }
</style>

<script type="text/ng-template" id="myModalContent.html">
    <div id="background"></div>
     Some text in the div
</script>

Answer 1

根据我们的评论讨论，我正在跟进一个答案。

如上述评论所述，固定初始容器元素的高度和宽度，将 div 扩展到整个屏幕。

div 周围的 'border' 的剩余问题是由于框架在模式上设置的边框。你可以通过设置

来解决这个问题

margin: 0;

在模态对话框上 class。

这是一个更新的插件：

http://plnkr.co/edit/ycuD0OU8PRj5j4qiZnDw?p=preview

使 div 显示在 Angular UI 模态之外

Making div show outside Angular UI Modal

angularjs

angular-ui

angular-ui-bootstrap