在 Angular UI 模态之外制作 div 显示

Question

在这个 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 周围的"边界"的剩余问题是因为模态上的框架设置的边界。您可以通过设置

margin: 0;

在模式对话框类上。

这是一个更新的 plunker：

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