To close bootstrap modal you can use 'hide' as option to modal method as follow
similarly, to open Modal pop-up using jquery, you can use
Or you can simply toggle the state of Modal pop-up using this Jquery Toggle
To Close (Using Bootstrap 5)
var myModalEl = document.getElementById('myModal'); var modal = bootstrap.Modal.getInstance(myModalEl) modal.hide();
var myModalEl = document.getElementById('myModal'); var modal = bootstrap.Modal.getInstance(myModalEl) modal.show();
Disable modal pop-up from closing when clicking outside it
How to call jQuery function when pop-up modal is opened or closed?
Bootstrap has a few functions that can be called manually on modals:
$('#myModal').modal('toggle'); $('#myModal').modal('show'); $('#myModal').modal('hide');
You can see more here: Bootstrap modal component
Sometimes jQuery get's conflicted due to some plugins which cause errors or we include jquery twice by mistake and above code doesn't work, in this case, add
jQuery.noConflict(); $('#myModal').modal('show'); // to show Modal pop-Up with Id 'myModal' $('#myModal').modal('hide'); // to hide Modal pop-Up with Id 'myModal'
You can also try the below method
you need to place this code inside jQuery document.ready function.
Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly