Laravel Blade中iPad Pro竖屏时模态框被背景遮罩遮挡怎么解决

• 强制指定层级优先级
  Bootstrap默认模态框z-index为1050，背景遮罩z-index为1040，竖屏模式下大概率是其他样式覆盖了默认层级，在全局样式表添加以下代码即可：

#oMsg {
  z-index: 1060 !important;
}
.modal-backdrop {
  z-index: 1055 !important;
}

• 调整DOM节点位置
  如果模态框嵌套在其他父容器内，父容器如果设置了transform、opacity、filter这类会触发独立层叠上下文的属性，会导致子元素z-index无法全局生效，把模态框的HTML代码移动到<body>标签的直接子节点位置即可避免父容器样式影响。
• 排查竖屏媒体查询冲突
  检查样式表中@media (orientation: portrait)对应的样式规则，确认是否有误修改了模态框、遮罩的z-index或者position属性导致层级异常。
• JS动态修正层级
  如果样式修改不生效，可以通过模态框显示事件动态调整层级：

$('#oMsg').on('shown.bs.modal', function () {
  $(this).css('z-index', 1060);
  $('.modal-backdrop').last().css('z-index', 1055);
});

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