Question 243727 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – tabler theme modal backdrop issue for backpack

I use backpack 6.1 and also using backpack/theme-tabler v.1.0.

Have som errors with using modals.

here is modal backdrop issues : https://prnt.sc/TOGh2kC8MJ4k

i tried, modal-backdrop-zindex change like -1or change modal z-index chaneg like 100 doesnt work very well.

https://prnt.sc/YRk1YvKemeNo

i also changed, backpack tabler theme scripr and css files (upgraded to beta 1.20)

@basset('https://unpkg.com/@tabler/[email protected]/dist/js/tabler.min.js')

@basset('https://unpkg.com/@tabler/[email protected]/dist/css/tabler.min.css')

here is the html code.

<a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#modal-large">
    Large modal
</a>

<div class="modal modal-blur fade" id="modal-large" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Large modal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti
                dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit
                tempora totam unde.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
            </div>
        </div>
    </div>
</div>

any helps ?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here is some jQuery hack, it works but really want to fix, with CSS or something like that.

    <script>

    $(document).ready(function () {
        $(document).on('shown.bs.modal', '.modal', function () {
            $('.modal-backdrop').before($(this));
        });
    });

</script>

  2. 0

    Note that https://demo.backpackforlaravel.com/admin/dashboard has an example of a modal working;

    enter image description here

    this will open the themes modal:

    enter image description here

    I’m not sure but I’d say you have some custom CSS rule making that backdrop comes first, or the other way around.

    If not, please update your question with more code and the files where you add it so we can reproduce your issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search