bootstrap-modal-confirm-submit

Show a Modal Confirm with button link to confirm record delete

by Naresh Dharman

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<a class="btn btn-default btn-delete" href="delete.php?id=54">Delete</a>
<div class="modal fade" id="my-modal" 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">
                <a id="bt-modal-cancel" href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> 
                <a id="bt-modal-confirm" class="btn btn-danger btn-ok">Delete</a>

            </div>
        </div>
    </div>
</div>

CSS

body {
    padding: 30px;
}

JavaScript

$(function(){
	var $myModal = jQuery('#my-modal');

	// Modal to delete record
	var $btDelete = jQuery('.btn-delete');
	if ($btDelete.length) {
		$btDelete.click(function(e){
			e.preventDefault();

			var url = jQuery(this).attr('href');
			var id = url.replace(/[^0-9]/g, '');

			// Objects from alert modal
			var $dsBody = $myModal.find('div.modal-body');
			var $dsTitle = $myModal.find('div.modal-header h3');
			var $btConfirm = jQuery('#bt-modal-confirm');
			var $btCancel = jQuery('#bt-modal-cancel');

			$dsBody.html('<p>Are you sure you want to delete the record #' + id + '?</p>');
			$dsTitle.html('Delete Record');

			$myModal.modal({
				show: true
			});


			$btConfirm.attr('href', url).removeAttr('data-dismiss');
			$btCancel.click(function(){
				$dsTitle.html('Warning');
				$dsBody.html('<p>Notice</p>');
				$btConfirm.attr('href', '#').attr('data-dismiss', 'modal');
			});
		});
	}

});