How to hide a Bootstrap 5 modal window in pure JavaScript ?

@bobbybouwmann Hello thank you for your answer.

Here is my view.

<div>

	// Here is a datatable

	...

	// And here I have the modal form

	<div wire:ignore.self class="modal fade" id="authorForm" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">

        <div class="modal-dialog modal-dialog-centered modal-lg">

            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">{{ $formTitle }}</h5>
                </div>

                <form wire:submit.prevent="save">

                    <div class="modal-body">
						...
                    </div>

                    <div class="modal-footer">
                        <button wire:click="cancel" type="button" class="btn btn-primary" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-secondary">Enregistrer</button>
                    </div>

                </form>

            </div>

        </div>

    </div>

    <script>

        document.addEventListener('DOMContentLoaded', () => {
            document.addEventListener('closeModal', () => {
                var modal = new bootstrap.Modal(document.getElementById('authorForm'));
                modal.hide();
            });
        });

    </script>

</div>

And here is the save method in the controller.

public function save()
{
    $this->validate($this->rules, $this->messages);
    if ($this->updateMode) {
        $this->authorize('update', $this->author);
        $this->author->update();
    } else {
        $this->authorize('create', $this->author);
        $this->author->save();
    }
    $this->author->roles()->sync($this->selectedRoles);
    $this->dispatchBrowserEvent('closeModal');
    $this->initForm();
}

@bobbybouwmann Thank you for answer ...

In my bootstrap.js file, I have this, so I think that the javascript from bootstrap is loaded.

window._ = require('lodash');
import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

What you tell me is interesting ...

I don't necessarily want to use bootstrap for the javascript part. Why I try to use it is because I use Bootstrap as CSS framework and I want that the modal window (from the CSS framework) does not close when I click on the save button (in case of the data are not validated by the rules). So I have to close it manually after checking if the data are validated, and the I save and I close the modal window.

I have looked for a solution to do this without using JavaScript, but I don't understand how I can do. If I could do that another way with only Livewire, it could be great, but I don't know how.

What do you exactly mean by saying "I would personally just build the model in a livewire component and use it from there." ?

@bobbybouwmann Oh perhaps you mean adding / removing a hidden CSS attribute to the modal window, so showing and hiding it only with Livewire ?

@bobbybouwmann Hello ... I have at least found the solution.

This does not work.

document.addEventListener('DOMContentLoaded', () => {
    document.addEventListener('closeModal', () => {
        var modal = new bootstrap.Modal('#typeForm');
        modal.hide();
    });
});

And this works.

document.addEventListener('DOMContentLoaded', () => {
    var modal = new bootstrap.Modal('#typeForm');
    document.addEventListener('closeModal', () => {
        modal.hide();
    });
});

I just had to put the modal variable outside the event listener.

@vincent15000 Well, that makes sense ;)

@bobbybouwmann Yes ... it was only a little code to change, but I didn't see it right now. But you helped me by saying to me that it should work, so I have checked and tested several things. And finally I have noticed why it didn't work. Thank you @bobbybouwmann ;).

@vincent15000 you're crazy bro)) didn't help anything but your solution. That's weird that the show() method works just fine inside any event listeners, but this ugly hide() doesnt! Thx man for your answer!

@Dmitry_Allread_Return That's not weird ... you have to use a global variable for the modal variable.

@aboozar_k Hello, I follow your instructions and after close the modal no mouse, no keyboard, no scroll bar works properly.

I have to reopen the modal clicking twice on open modal button, and clicking the close button (which has the data-bs-dismiss="modal") to close again the modal and to the page return to normal.

It seems something more needs to be removed like the .modal-backdrop... I don't know!

I am using Laravel 11, bootstrap 5 and livewire 3.

do you have an idea about what can be causing this problem?

@joyltonmaciel don't mess with the DOM, use these jquery functions

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');