hide bootstrap modal from javascript without using jquery

Question

How to hide bootstrap modal from javascript without using jquery. None of the following work :

document.getElementById('id_1').modal('toggle');
document.getElementById('#id_1').modal('toggle');
document.getElementById('id_1').modal('hide');

If I add a class hide it works. The modal hides, But the main screen stays grey. Focus never shifts to the main screen until I click on the screen. Thanks

Answer 1

You can use v-if attribute on modal to toggle it. <b-modal v-if="isVisible">

Answer 2

I tried many solution but the one I created and worked for me is: add a close button (the default one given by Bootstrap modal template) and if you want you can add a d-none class to it if you want to hide it.

Then in your Javascript code :

var close = document.getElementById("closeButton");
close.click();