javascript bootstrap modal - cancel closing

Question

my work is using javascript bootstrap 2.0.4

I'm looking for a way to cancel the modal from closing, by logic control. but I can't find any details how to do this

http://getbootstrap.com/javascript/#modals

something like .NET

OnWindowClosing(eventArguement) 
{ 
    if (shouldCancel) {
      eventArguement.Cancel = true; 
      return;
    }
}

Are you looking for this question ? http://stackoverflow.com/q/9894339/2454790 — BENARD Patrick, Jan 20 '14 at 08:05
@Jahnux73 . no, the post looks like want to disable the closing, while i still allow it to close, but under certain condition, i want to abort the closing. — Kelmen, Jan 20 '14 at 08:20

BENARD Patrick · Accepted Answer · 2016-04-08T19:51:40.793

58

Look at here : www.bootply.com/QTTDf3zRgV

In this exemple, if the checkbox is checked, then the modal can't be closed ( with js/jquery):

$('#myModal').on('hide.bs.modal', function(e){
  if( $('#block').is(':checked') ) {
     e.preventDefault();
     e.stopImmediatePropagation();
     return false; 
   }
});

edited Apr 08 '16 at 19:51

answered Jan 20 '14 at 08:56

BENARD Patrick

30,363
16
99
105

As @Affilnost says below, ```e.cancel()``` is not defined use ```e.stopImmediatePropagation()``` – barsh Dec 30 '14 at 14:40
1

Works great with Bootstrap 3 as well. – dangowans Aug 08 '19 at 19:46

score 5 · Answer 2 · edited May 31 '15 at 17:52

5

e.cancel is not defined and causes an error - that's why the solution above is working.

You should add e.stopImmediatePropagation();

Here's a demo: http://www.bootply.com/o5jsyItQMm

edited May 31 '15 at 17:52

BENARD Patrick

30,363
16
99
105

answered Oct 10 '14 at 14:18

Affilnost

309
3
7

score 4 · Answer 3 · answered Jan 06 '15 at 08:05

4

the solution you provided was not working so find this and its the perfect solution referrence here https://github.com/twbs/bootstrap/issues/1202#issuecomment-48601320

$('#myModal').on('hide.bs.modal.prevent', closeModalEvent);
/**
* allow popup to hide or not
* @param {type} e
* @returns {Boolean}
 */
function closeModalEvent(e) {
    e.preventDefault();
    if ($('#block').is(':checked')) {
        $('#myModal').off('hide.bs.modal.prevent');
        $("#myModal").modal('hide');
        return true;
    }
    return false;
}

answered Jan 06 '15 at 08:05

Himanshu Singh

136
3

I'm using *Bootstrap v4-alpha.6* and tying in to the `hide.bs.modal.prevent` event as you linked in [the github issue](https://github.com/twbs/bootstrap/issues/1202#issuecomment-48601320). This does indeed prevent the modal from closing, but the second time the user attempts to click outside the modal it logs an error to the console : `bootstrap.min.js Uncaught Error: Modal is transitioning`. – Blaskovicz Jul 14 '17 at 14:58
issue still persist ?? – Himanshu Singh Sep 22 '17 at 10:26
Can anyone tell me what is that “…prevent” construction in event name? (I know what is namespacing, but can’t find anything about prevent namespace) – diesel94 Apr 14 '23 at 11:41

javascript bootstrap modal - cancel closing

3 Answers3

Linked