Shopify应用块中iframe模态框无法全屏显示问题排查

我希望下方的模态框打开时占据整个屏幕：

<div id="myModal" class="modal-gift">
  <div class="modal-content">
    <span class="close" onclick="closeModal()">&times;</span>
    <iframe scrolling="no" src="https://my.ngrok.app/web" class="modal-iframe"></iframe>
  </div>
</div>

当前使用的CSS代码：

.modal-gift {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* High index to sit above everything on the page */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0,0,0,.7);
}

.modal-content {
  background-color: #fefefe;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  z-index: 1002; /* Above the overlay */
}

.modal-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

.modal-content, .modal-iframe {
  box-sizing: border-box;
}

但目前模态框被限制在另一个div内部，请问问题出在哪里？

问题根源 #

问题出在模态框的父元素设置了transform、perspective或者filter属性——当父容器存在这些属性时，会创建新的CSS包含块，导致position: fixed的元素不再相对于视口定位，而是绑定到这个父容器，所以全屏模态框被限制在了父div范围内。

解决方法 #

1. 排查父容器样式：找到包裹#myModal的外层div，检查它的CSS是否有transform（比如translate、scale）、perspective或filter属性，直接移除这些属性即可恢复模态框的全屏定位。
2. 调整DOM结构：如果父容器的上述属性不能移除，就把#myModal直接移到<body>标签的最末尾，让它成为body的直接子元素，这样position: fixed就会相对于视口生效。
3. 完善内容全屏样式：同时修改.modal-content的样式，确保内容也占满屏幕：

.modal-content {
  background-color: #fefefe;
  position: absolute; /* 替换原有的relative定位 */
  left: 0;
  top: 0;
  width: 100vw; /* 基于视口宽度占满 */
  height: 100vh; /* 基于视口高度占满 */
  padding: 0;
  z-index: 1002;
}

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