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?

Elaborate it clearly that how you want to hide under what circumstances? — pvnarula, Jun 06 '13 at 21:54
This library might help http://bootboxjs.com/index.html#about — Chris S, Jun 06 '13 at 21:59

PSL · Accepted Answer · 2013-11-08T16:41:30.053

14

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.

edited Nov 08 '13 at 16:41

answered Jun 06 '13 at 21:58

PSL

123,204
21
253
243

may i know from where the coding of `data-dismiss` comes from ? – Pardeep Jain Feb 13 '16 at 06:22
@PardeepJain Sorry i did not understand your question. – PSL Feb 18 '16 at 18:32
i mean i know `data-dismiss` used to dismiss the modal. but where the code has written for the same. i.e `data-dismiss` is code of bootstrap.js or .css or anyone else ? – Pardeep Jain Feb 18 '16 at 18:40
It should be in the bootstrap implementation and you would use it on the template. – PSL Feb 18 '16 at 18:41
in bootstrap.js or in bootstrap.css ? – Pardeep Jain Feb 18 '16 at 18:42

score 3 · Answer 2 · answered Nov 21 '14 at 06:10

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

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

2 Answers2

Demo

Demo2

Linked