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-di

Answer 1

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();

Answer 2

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.