IFrame始终显示于模态框上方，如何实现模态框置顶或关闭IFrame

方案A：点击“Fluxed joints Lookup”时关闭Fancybox iframe #

你使用Fancybox加载iframe，直接调用Fancybox官方提供的关闭方法即可解决之前关闭命令无效的问题，修改触发模态框的链接代码：

• 若使用Fancybox 3.x及以上版本：

<a class="dropdown-item text-dark" onclick="parent.flux(); Fancybox.close();" target="_blank"> Fluxed joints Lookup</a>

• 若使用Fancybox 2.x及以下旧版本：

<a class="dropdown-item text-dark" onclick="parent.flux(); $.fancybox.close();" target="_blank"> Fluxed joints Lookup</a>

注意：如果iframe页面和主页面跨域，该方法会因浏览器跨域限制失效，此时优先选择方案B。

方案B：让Bootstrap模态框显示在iframe上方 #

问题核心是Fancybox生成的iframe默认z-index高于Bootstrap模态框，通过CSS强制提升模态框层级即可解决：

方法1：添加自定义类（推荐，避免覆盖全局样式） #

1. 编写自定义CSS：

/* 提升模态框容器层级 */
.high-z-modal .modal-dialog {
  z-index: 9999; /* 需大于Fancybox默认z-index（通常为8000左右） */
}

/* 同步提升模态框背景层层级 */
.high-z-modal .modal-backdrop {
  z-index: 9998;
}

2. 修改模态框HTML，添加自定义类：

<div class="modal fade high-z-modal" tabindex="-1" role="dialog">
  <!-- 模态框内部内容 -->
</div>

方法2：直接覆盖默认样式（优先级更高） #

如果不想添加自定义类，可直接覆盖Bootstrap默认样式：

.modal-dialog {
  z-index: 9999 !important;
}

.modal-backdrop {
  z-index: 9998 !important;
}

内容的提问来源于stack exchange，提问作者dan.robertson