Confirm deletion in modal / dialog using Twitter Bootstrap?
GET recipe
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:
<a href="#" data-href="delete.php?id=23" data-toggle="modal" data-target="#confirm-delete">Delete record #23</a><button class="btn btn-default" data-href="/delete.php?id=54" data-toggle="modal" data-target="#confirm-delete"> Delete record #54</button>Here #confirm-delete points to a modal popup div in your HTML. It should have an "OK" button configured like this:
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> ... </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <a class="btn btn-danger btn-ok">Delete</a> </div> </div> </div></div>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
POST recipe
I realize that in some cases there might be needed to perform POST or DELETE request rather then GET. It it still pretty simple without too much code. Take a look at the demo below with this approach:
// Bind click to OK button within popup$('#confirm-delete').on('click', '.btn-ok', function(e) { var $modalDiv = $(e.delegateTarget); var id = $(this).data('recordId'); $modalDiv.addClass('loading'); $.post('/api/record/' + id).then(function() { $modalDiv.modal('hide').removeClass('loading'); });});// Bind to modal opening to set necessary data properties to be used to make request$('#confirm-delete').on('show.bs.modal', function(e) { var data = $(e.relatedTarget).data(); $('.title', this).text(data.recordTitle); $('.btn-ok', this).data('recordId', data.recordId);});Demo: http://plnkr.co/edit/V4GUuSueuuxiGr4L9LmG?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));});
http://bootboxjs.com/ - latest works with Bootstrap 3.0.0
The simplest possible example:
bootbox.alert("Hello world!"); From the site:
The library exposes three methods designed to mimic their native JavaScript equivalents. Their exact method signatures are flexible as each can take various parameters to customise labels and specify defaults, but they are most commonly called like so:
bootbox.alert(message, callback)bootbox.prompt(message, callback)bootbox.confirm(message, callback)Here's a snippet of it in action (click "" below):
$(function() { bootbox.alert("Hello world!");});<!-- required includes --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/><!-- bootbox.js at 4.4.0 --><script src="https://rawgit.com/makeusabrew/bootbox/f3a04a57877cab071738de558581fbc91812dce9/bootbox.js"></script>
// ---------------------------------------------------------- Generic Confirm function confirm(heading, question, cancelButtonTxt, okButtonTxt, callback) { var confirmModal = $('<div class="modal hide fade">' + '<div class="modal-header">' + '<a class="close" data-dismiss="modal" >×</a>' + '<h3>' + heading +'</h3>' + '</div>' + '<div class="modal-body">' + '<p>' + question + '</p>' + '</div>' + '<div class="modal-footer">' + '<a href="#" class="btn" data-dismiss="modal">' + cancelButtonTxt + '</a>' + '<a href="#" id="okButton" class="btn btn-primary">' + okButtonTxt + '</a>' + '</div>' + '</div>'); confirmModal.find('#okButton').click(function(event) { callback(); confirmModal.modal('hide'); }); confirmModal.modal('show'); }; // ---------------------------------------------------------- Confirm Put To Use $("i#deleteTransaction").live("click", function(event) { // get txn id from current table row var id = $(this).data('id'); var heading = 'Confirm Transaction Delete'; var question = 'Please confirm that you wish to delete transaction ' + id + '.'; var cancelButtonTxt = 'Cancel'; var okButtonTxt = 'Confirm'; var callback = function() { alert('delete confirmed ' + id); }; confirm(heading, question, cancelButtonTxt, okButtonTxt, callback); });