Skip to content

Instantly share code, notes, and snippets.

@jnormore
Last active December 27, 2015 18:58
Show Gist options
  • Save jnormore/7373165 to your computer and use it in GitHub Desktop.
Save jnormore/7373165 to your computer and use it in GitHub Desktop.
Bootstrap 2.3 alert and confirm modals. Overrides window.alert normally, but window.confirm override requires a callback function to be passed to get result. Optional arguments for modal title and confirm button label.
window.alert = function(message, title) {
if($("#bootstrap-alert-box-modal").length == 0) {
$("body").append('<div id="bootstrap-alert-box-modal" class="modal hide fade">\
<div class="modal-header" style="min-height:20px;">\
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\
<h3></h3>\
</div>\
<div class="modal-body"><p></p></div>\
<div class="modal-footer">\
<a href="#" data-dismiss="modal" class="btn">Close</a>\
</div>\
</div>');
}
$("#bootstrap-alert-box-modal .modal-header h3").text(title || "");
$("#bootstrap-alert-box-modal .modal-body p").text(message || "");
$("#bootstrap-alert-box-modal").modal('show');
};
window.confirm = function(message, title, yes_label, callback) {
$("#bootstrap-confirm-box-modal").data('confirm-yes', false);
if($("#bootstrap-confirm-box-modal").length == 0) {
$("body").append('<div id="bootstrap-confirm-box-modal" class="modal hide fade">\
<div class="modal-header" style="min-height:20px;">\
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\
<h3></h3>\
</div>\
<div class="modal-body"><p></p></div>\
<div class="modal-footer">\
<a href="#" data-dismiss="modal" class="btn">Cancel</a>\
<a href="#" class="btn btn-primary">' + (yes_label || 'OK') + '</a>\
</div>\
</div>');
$("#bootstrap-confirm-box-modal .modal-footer .btn-primary").on('click', function () {
$("#bootstrap-confirm-box-modal").data('confirm-yes', true);
$("#bootstrap-confirm-box-modal").modal('hide');
return false;
});
$("#bootstrap-confirm-box-modal").on('hide', function () {
if(callback) callback($("#bootstrap-confirm-box-modal").data('confirm-yes'));
});
}
$("#bootstrap-confirm-box-modal .modal-header h3").text(title || "");
$("#bootstrap-confirm-box-modal .modal-body p").text(message || "");
$("#bootstrap-confirm-box-modal").modal('show');
};
window.prompt = function(message, title, callback) {
if($("#bootstrap-prompt-box-modal").length == 0) {
$("body").append('<div id="bootstrap-prompt-box-modal" class="modal hide fade">\
<div class="modal-header" style="min-height:20px;">\
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\
<h3></h3>\
</div>\
<div class="modal-body">\
<p></p>\
<input type="text" placeholder="Name" />\
</div>\
<div class="modal-footer">\
<a href="#" data-dismiss="modal" class="btn">Cancel</a>\
<a href="#" class="btn btn-primary">OK</a>\
</div>\
</div>');
$("#bootstrap-prompt-box-modal .modal-footer .btn-primary").on('click', function () {
if(callback) callback($("#bootstrap-prompt-box-modal input[type=\"text\"]").val());
$("#bootstrap-prompt-box-modal").modal('hide');
return false;
});
}
$("#bootstrap-prompt-box-modal .modal-header h3").text(title || "");
$("#bootstrap-prompt-box-modal .modal-body p").text(message || "");
$("#bootstrap-prompt-box-modal").modal('show');
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment