使 div 在 Angular UI Modal 之外显示答案

【问题标题】：Making div show outside Angular UI Modal使 div 在 Angular UI Modal 之外显示
【发布时间】：2018-01-15 11:28:20
【问题描述】：

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>

【问题讨论】：

首先，你的身高是 1oo 而不是 100。另外，div 的文本在 div 标签之外。此外，.modal-dialog 的宽度和高度限制了 div 的宽度和高度，因为它是容器。如果你也将它们设置为 100%，你会看到它确实一直在扩展
谢谢。我修复了100，但仍然有同样的问题。 div 的文本在标签之外，因为它属于模态本身，而不是背景。问题是：如果位置是固定的并且顶部/左侧为零，为什么背景不是位于屏幕的顶部/左侧而不是模态？背景 div 应该是独立的，因为它的位置是fixed。

标签： angularjs angular-ui-bootstrap angular-ui

【解决方案1】：

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

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

div 周围的“边框”的剩余问题是由于框架在模态框上设置的边框。你可以通过设置来解决这个问题

margin: 0;

关于模态对话框类。

这是一个更新的 plunker：

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

【讨论】：

我无法扩展容器，我需要它保持原样。背景颜色必须覆盖容器后面的屏幕。
对不起，我真的不明白你现在要做什么。我以为你想让橙色框占据整个屏幕的大小。如果你只是想改变模态框的背景颜色，你应该只用 CSS 来做。也许尝试制作一个你正在尝试做的图片模型。