CODEWITHSUNDEEP
javascripttwitter-bootstrapmodal-dialogtwitter-bootstrap-3
Kokizzu
Kokizzu

Reputation: 26818

How to prevent bootstrap modal from closing from button using onclick?

i have modal with button (Save)

<button type="button" class="btn btn-success btn-sm" data-dismiss="modal" onclick="do_save()">Save
    </button>

how to prevent closing when do_save() function failed? (for example when some data fails to validate)

Upvotes: 22

Views: 57914

Answers (4)

Tyson Gibby
Tyson Gibby

Reputation: 4650

If you are using bootstrap 4 this is called a "static backdrop" and can be achieved by adding the data-backdrop="static" attribute

<div class="modal fade" id="modalExample" data-backdrop="static">

src: Bootstrap 4 Modal - Static backdrop

Upvotes: 3

Andrea
Andrea

Reputation: 191

If you catch the click-event from the button like this:

     $('#buttonId').off('click').click(function(clickEvent){
        //enter code here
     });

you actually can prevent the closing of your modal. For this, depending on your situation, you will find these two functions useful:

     clickEvent.preventDefault();
     clickEvent.stopPropagation();

If I understood this site (which is in German) http://www.mediaevent.de/javascript/event-handler-default-verhindern.html correctly, preventDefault() stops the immediate default action (such as following a link). However, the event itself will still travel through the DOM and can be "heard" by various event listeners, one of these is the event listener that hides the modal. For this the second function is needed, which stops the event's travel through the DOM. Thus, it can't be heard by the hiding listener and the window won't be closed (hidden). Therefore, I suggest to implement the functions like so: 

     $('#buttonId').off('click').click(function(clickEvent){
        //enter code here
      var myDataIsValid = true;
      // check if Data is valid => myDataIsValid = true or false
      if(myDataIsValid){
       //do Stuff
      }else{
       clickEvent.preventDefault();
       clickEvent.stopPropagation();
       //do other Stuff
      }
    });

In my code, I only need to use stopPropagation(), as my default action is wanted, so you can use the two functions independently.

note: This solution only was tested with a Firefox browser

Upvotes: 9

vogomatix
vogomatix

Reputation: 5041

Since you are using jQuery anyway, try not to have JavaScript/jQuery embedded in your code.

$('#buttonId').on( 'click', function () {
   // either call do_save or embed the contents of do_save in here
   var myDataIsValid = true; // change to call validator function
   if (myDataIsValid) {
     $('#myModal').modal('hide');
   }
   return true; // value depends on whether you want stopPropagation or not.
});

HTML:

<button id="buttonId" type="button" class="btn btn-success btn-sm">Save</button>

As an alternative, you can probably prevent closing by intercepting the 'hide' event and returning false from that.

Upvotes: 7

Bass Jobsen
Bass Jobsen

Reputation: 49044

Don't use the data-dismiss="modal" and let your function close (hide) your modal:

<button type="button" class="btn btn-success btn-sm" onclick="do_save()">Save</button>

"

function do_save()
    {
        if(Math.floor(Math.random() * 2)==1)
        {
            console.log('success');
            $('#myModal').modal('hide');
            return;
        }   
        console.log('failure');
        return false;
    }

Upvotes: 40

Related Questions