0

Hi in my laravel blade I have a modal opening up when the screen orientation is Portrait with a message saying rotate the screen to landscape mode.

But Every time when I check this with iPad pro portrait mode, even though the modal pops up, it's blocked with the backdrop div

enter image description here

The modal works fine on same device but the landscape mode...

Following is the modal code

<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>

How can I take the modal to the front and enable the button on portrait mode?

Veenavi Anutthara
  • 125
  • 2
  • 13

2 Answers2

1

You can simply use your modal code just before the ending body tag.

For more details you may refer this answer

Volka Dimitrev
  • 337
  • 4
  • 15
  • 38
0

I can't replicate your situation without the rest of the HTML code but perhaps this might be a z-index and positioning issue. Try the following

Since you don't have a CSS document, apply z-index: 999; to your modal div using inline style. Be sure to also include an appropriate position rule. Why? In order to bring your modal above other elements, you must assign a position rule other than the default.

Here's an example:

<div class="modal-dialog" style="z-index: 999; position: relative;">
Ken
  • 574
  • 4
  • 15