Skip to content

Instantly share code, notes, and snippets.

@bh3605
Created June 3, 2016 17:55
Show Gist options
  • Save bh3605/76c7f19b89a86fdf9a33f827d4bc120f to your computer and use it in GitHub Desktop.
Save bh3605/76c7f19b89a86fdf9a33f827d4bc120f to your computer and use it in GitHub Desktop.
A simple extensible modal used primarily for confirm dialogs.
(function ($) {
$.fn.confirmModal = function (opts) {
var body = $('body');
var unique = Math.floor(Math.random() * (1e+9));
var clickedOutside = true;
// the innerFrameId allows a body of markup to be inserted w append in lieu of message
// use detach first if the nodes are already in the dom
var defaultOptions = {
confirmModalId: "confirmModal" + unique,
confirmInnerFrameId: "confirmInnerFrame" + unique,
confirmTitle: 'Please confirm',
confirmMessage: 'Are you sure you want to perform this action ?',
confirmOk: 'Yes',
confirmCancel: 'Cancel',
confirmOmitCancel: false,
confirmDirection: 'rtl',
confirmStyle: 'primary',
confirmCallback: defaultCallback,
confirmCancelCallback: defaultCallback,
confirmDismiss: true,
confirmDismissOnCancel: true,
confirmAutoOpen: false,
confirmHiddenCallback: defaultCallback,
confirmClickedOutsideCallback: defaultCallback
};
var options = $.extend(defaultOptions, opts);
var headModalTemplate =
'<div class="modal fade" id="#modalId#" tabindex="-1" role="dialog" aria-labelledby="#AriaLabel#" aria-hidden="true">' +
'<div class="modal-dialog" role="document" style="display: table">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
'<h4 id="#AriaLabel#" class="modal-title">#Heading#</h4>' +
'</div>' +
'<div id="#innerFrameId#" class="modal-body">' +
'<p>#Body#</p>' +
'</div>' +
'<div class="modal-footer">' +
'#buttonTemplate#' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
;
return this.each(function (index) {
var confirmLink = $(this);
var targetData = confirmLink.data();
var currentOptions = $.extend(options, targetData);
var modalId = options.confirmModalId;
var innerFrameId = options.confirmInnerFrameId;
var modalTemplate = headModalTemplate;
var buttonOk = '<button class="btn btn-#Style#" data-dismiss="ok">#Ok#</button>';
var buttonCancel = (options.confirmOmitCancel) ? ''
: '<button class="btn btn-default" data-dismiss="modal">#Cancel#</button>';
var buttonTemplate = buttonCancel + buttonOk;
if (options.confirmDirection == 'ltr') {
buttonTemplate = buttonOk + buttonCancel;
}
var confirmTitle = options.confirmTitle;
if (typeof options.confirmTitle == 'function') {
confirmTitle = options.confirmTitle.call(this);
}
var confirmMessage = options.confirmMessage;
if (typeof options.confirmMessage == 'function') {
confirmMessage = options.confirmMessage.call(this);
}
modalTemplate = modalTemplate.
replace('#buttonTemplate#', buttonTemplate).
replace('#modalId#', modalId).
replace('#innerFrameId#', innerFrameId).
replace('#AriaLabel#', confirmTitle).
replace('#Heading#', confirmTitle).
replace('#Body#', confirmMessage).
replace('#Ok#', options.confirmOk).
replace('#Cancel#', options.confirmCancel).
replace('#Style#', options.confirmStyle)
;
body.append(modalTemplate);
var confirmModal = $('#' + modalId);
confirmLink.on('click', function (modalEvent) {
modalEvent.preventDefault();
confirmModal.modal('show');
});
$('button[data-dismiss="ok"]', confirmModal).on('click', function (event) {
clickedOutside = false;
if (options.confirmDismiss) {
confirmModal.modal('hide');
}
options.confirmCallback(confirmLink, confirmModal);
});
$('button[data-dismiss="modal"]', confirmModal).on('click', function (event) {
clickedOutside = false;
if (options.confirmDismissOnCancel) {
confirmModal.modal('hide');
}
options.confirmCancelCallback(confirmLink, confirmModal);
});
if (options.confirmAutoOpen) {
confirmModal.modal('show');
}
$('#' + modalId).on('hidden.bs.modal', function () {
var thisModal = $('#' + options.confirmModalId);
var modal = thisModal[0];
if (clickedOutside)
options.confirmClickedOutsideCallback(this, modal);
options.confirmHiddenCallback(this, modal);
$(modal).removeData('bs.modal');
$(modal).remove();
});
});
function defaultCallback(target, modal) {
//window.location = $(target).attr('href');
}
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment