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

来解决这个问题

margin: 0;

在模态对话框类上。

这是一个更新的plunker：

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

在Angular UI Modal之外制作div节目

1 个答案: