Confirm delete modal/dialog with Twitter bootstrap?-open source projects twbs/bootstrap

dfsq

For this task you can use already available plugins and bootstrap extensions. Or you can make your own confirmation popup with just 3 lines of code. Check it out.

Say we have this links (note data-href instead of href) or buttons that we want to have delete confirmation for:

Delete record #23


    Delete record #54

Here #confirm-delete points to a modal popup div in your HTML. It should have an “OK” button configured like this:


    
        
            
                ...
            
            
                ...
            
            
                Cancel
                Delete
            
        
    

Now you only need this little javascript to make a delete action confirmable:

$('#confirm-delete').on('show.bs.modal', function(e) {
    $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
});

So on show.bs.modal event delete button href is set to URL with corresponding record id.

Demo: http://plnkr.co/edit/NePR0BQf3VmKtuMmhVR7?p=preview

Bootstrap 2.3

Here is an original version of the code I made when I was answering this question for Bootstrap 2.3 modal.

$('#modal').on('show', function() {
    var id = $(this).data('id'),
        removeBtn = $(this).find('.danger');
    removeBtn.attr('href', removeBtn.attr('href').replace(/(&|\?)ref=\d*/, '$1ref=' + id));
});

Demo for Bootstrap 2.3: http://jsfiddle.net/MjmVr/1595/