模态背景在 laravel 刀片的纵向屏幕方向上阻止模态内容答案

【问题标题】：Modal Backdrop block the modal content on portrait screen orientation in laravel blade模态背景在 laravel 刀片的纵向屏幕方向上阻止模态内容
【发布时间】：2021-11-05 00:53:53
【问题描述】：

嗨，在我的 laravel 刀片中，当屏幕方向为纵向时，我打开了一个模式，并显示一条消息说将屏幕旋转到横向模式。

但是每次我用 iPad pro 纵向模式检查时，即使弹出模式，它也会被背景 div 阻止

模式在同一设备上工作正常，但横向模式...

下面是模态代码

<div id="oMsg" class="modal fade" role="dialog">
                        <div class="modal-dialog">
                        <!-- device orientation modal content-->
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title">{{ __('Attention') }}</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                                <div class="modal-body info">
                                        <p class="roleChange_popupText">
                                            Veuillez faire pivoter votre appareil en mode paysage.
                                        </p>
                                </div>
                                <div class="modal-footer mb-4">
                                    <div class="col-md-12 text-right mb-4">
                                        <button type="button" data-dismiss="modal" class="btn btn-primary btn-admin-form-save">{{ __('Confirmer') }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

如何将模态框置于最前面并在纵向模式下启用按钮？

【问题讨论】：

你应该包含与你的问题/问题相关的 CSS 代码
我还没有碰过我的引导 css 与模态有关，

标签： javascript html css bootstrap-4 laravel-blade

【解决方案1】：

您可以简单地在结束 body 标记之前使用您的模态代码。

更多详情可以参考answer

【讨论】：

【解决方案2】：

如果没有其余的 HTML 代码，我无法复制您的情况，但这可能是 z-index 和定位问题。试试下面的

由于您没有 CSS 文档，请使用内联样式将 z-index: 999; 应用于您的模态 div。确保还包括适当的position 规则。为什么？为了使您的模态框高于其他元素，您必须指定除默认值之外的位置规则。

这是一个例子：

<div class="modal-dialog" style="z-index: 999; position: relative;">

【讨论】：