模态背景在 laravel blade 中阻止纵向屏幕方向的模态内容

Question

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

但是每次我用 iPad 专业肖像模式检查时，即使模式弹出，它也会被背景挡住 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>

如何将模态调到前面并在纵向模式下启用按钮？

Answer 1

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

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

这是一个例子：

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

Answer 2

您只需在结束 body 标记之前使用模态代码即可。

更多细节你可以参考这个answer

模态背景在 laravel blade 中阻止纵向屏幕方向的模态内容

Modal Backdrop block the modal content on portrait screen orientation in laravel blade

html

javascript

css

laravel-blade

bootstrap-4