closeModalOnClickAway doesn't work with bootstrap

[marionfromfrance]

Hi guys,
for a lot of reasons, I can't use tailwind and I made the modal work with a blade template and custom / bootstrap classes.
But, the closeModalOnClickAway feature doesn't work when I click away.

In another app, I have tailwind and it works perfectly.

Does someone have an idea? I guess I forgot something but I don't figure out what...

Here is the content of my blade modal :

<div>
    <div class="modal fade show"
         id="myExampleModal"
         style="display: block; max-height:90vh; overflow-y:auto;"
         tabindex="-1"
         role="dialog"
         aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="exampleModalLabel">{{$title}}</h4>
                    <button class="close"
                            type="button"
                            aria-label="Close"
                            wire:click.prevent="$emit('closeModal')">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="#" method="post" wire:submit.prevent="submit(Object.fromEntries(new FormData($event.target)))" enctype="multipart/form-data">
                        //my form stuff with buttons
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-backdrop fade show"
         id="backdrop"
         style="display: block;"></div>
</div>

Thanks a lot!

Marion

[marionfromfrance]

Hi,
it finally worked but I had to add inline JavaScript at the end of my blade file :
<script> $("#goalModal").modal("show"); $("#goalModal").on('hidden.bs.modal', function () { window.Livewire.emit('closeModal'); // console.log('modal hide'); }); // console.log('modal show'); </script>
Don't think it's the better way to make this work but I didn't find anything else.
Has someone any idea to remove this JavaScript?

Thanks,

Marion

[26kito]

Can you give a guide how to use this Modal component with Bootstrap? I don't know how to configure it with Bootstrap