Close bootstrap modal without using "hide" and "data-dismiss"

Question

I want to close bootstrap modal box conditionally. If I use $('#modal').modal('hide'); this, some thing goes wrong with my code. And If I use data-dismiss="modal" in the HTML template, modal dismiss action performs before my actual functionality should be perform on button click.

So, there is any other way to close bootstrap modal or any idea to use data-dismiss="modal" at run time?

Answer 1

You can do it with auto modal closing behavior which uses the data-dismiss attribute itself or with the manual modal opening (as i guess you are doing currently) , by subscribing to hide event and use preventDefault on the event.

$('yourmodalselector').on('hide',function(e){
   if(yourConditionNotToCloseMet){
      e.preventDefault();
   }
});

Demo

Demo2

See Documentation

hide event event is fired immediately when the hide instance method has been called, which gets called wither way and this is the best place to prevent the modal from closing.

Answer 2

Make another button like this

<button type="button" class="btn btn-warning btn-lg shiny" data-dismiss="modal" aria-hidden="true">Cancel</button>

This button contains data-dismiss="modal" .You can hide this if you want.

Now You can use any other function in a customized way and when you want to hide the modal you can call

$(".btn-warning").click();