如何让Angular UI Modal内的div显示在模态框外部？

我来帮你分析这个问题的根源，再给出符合需求的解决方案：

问题原因 #

你碰到的这个情况是CSS定位规则导致的：当元素的任意祖先节点设置了transform、perspective或filter属性（且值不为none）时，这个祖先节点会成为其内部position:fixed元素的包含块，而不再是浏览器的整个视口。

Angular UI Modal的.modal-dialog容器默认用transform: translate(-50%, -50%)实现模态框居中，所以你放在模态框内部的#background元素，哪怕设置了position:fixed，实际也是相对于.modal-dialog来定位的，自然就被限制在模态框范围内了。

解决方案（满足div必须在模态框内部的要求） #

我们可以修改模态框的居中方式，移除它的transform属性，让fixed定位的元素回归以视口为包含块的正常行为，同时保持模态框的居中效果。

修改你的代码如下：

<style>
.app-modal .modal-dialog {
  width: 260px;
  height:100px;
  /* 移除默认的transform属性 */
  transform: none !important;
  /* 用绝对定位+margin:auto实现居中，替代transform的居中逻辑 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

div#background {
  position:fixed;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background-color:orange;
  /* 可选：添加更高的z-index确保覆盖其他页面内容 */
  z-index: 9999;
}
</style> 

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

这样修改后，模态框依然会居中显示，#background元素会正确覆盖整个浏览器屏幕，同时它的DOM结构依然处于模态框内部，完全符合你的需求。

内容的提问来源于stack exchange，提问作者ps0604