There is a situation that we need user to confirm before they proceed their action. You don’t want to accidently delete very important information. So I come up the idea to extend the bootstrap modal popup to create a confirm modal before calling the function to delete some stuff.
(function ($) {
$.fn.extend({
//pass the options variable to the function
confirmModal: function (options) {
var html = '<div class="modal" id="confirmContainer"><div class="modal-header"><a class="close" data-dismiss="modal">×</a>' +
'<h3>#Heading#</h3></div><div class="modal-body">' +
'#Body#</div><div class="modal-footer">' +
'<a href="#" class="btn btn-primary" id="confirmYesBtn">Confirm</a>' +
'<a href="#" class="btn" data-dismiss="modal">Close</a></div></div>';
var defaults = {
heading: 'Please confirm',
body:'Body contents',
callback : null
};
var options = $.extend(defaults, options);
html = html.replace('#Heading#',options.heading).replace('#Body#',options.body);
$(this).html(html);
$(this).modal('show');
var context = $(this);
$('#confirmYesBtn',this).click(function(){
if(options.callback!=null)
options.callback();
$(context).modal('hide');
});
}
});
})(jQuery);
Basically, all you need to do in the UI, is to create a link to activate the confirm modal, and a empty div for my plugin to work with. With options, you can pass in modal heading and modal content body. With callback method, is your logic to delete stuff or something you want to do originally.
<script type="text/javascript">
$(function () {
$("#openConfirmModal").click(function () {
$("#confirmDiv").confirmModal({
heading: 'Confirm to delete',
body: 'Are you sure you want to delete this record?',
callback: function () {
alert('callback test');
}
});
});
</script>
<a href="#" id="openConfirmModal">Open Confirm Modal</a>
<div id="confirmDiv"></div>
