CODEWITHSUNDEEP
htmltwitter-bootstrap
arame3333
arame3333

Reputation: 10203

html5 & bootstrap modal popup - how to confirm before cancel?

I have this cancel button, which when clicked I would like to display a confirmation prompt before closing the modal popup window;

<input type="button" class="btn btn-warning" data-dismiss="modal" value="Cancel" />

As you can see, I am using the data-dismiss property to close the modal popup. However if the user has started entering data in the form, I would like to prompt the user to confirm that they want to leave without making changes. I could capture the click event in jquery, but I would then have to close the popup myself and not use data-dismiss. So what is the best way of doing this?

Upvotes: 0

Views: 1443

Answers (1)

Rob Quincey
Rob Quincey

Reputation: 2896

The best way of doing it is exactly how you described. Remove the data-dismiss="modal" attribute and instead close it yourself (using Bootstraps 'hide' method (scroll down to 'methods')) if they confirm they want to exit and lose changes, like this.

if(confirm('Are you sure you want to cancel. You will lose your unsaved changes')){
    $('#myModal').modal('hide')
}

Upvotes: 2

Related Questions