Skip to content

Instantly share code, notes, and snippets.

@smailliwcs
Created September 22, 2020 15:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save smailliwcs/07737fa39548029fa36d3e79db0277fa to your computer and use it in GitHub Desktop.
Save smailliwcs/07737fa39548029fa36d3e79db0277fa to your computer and use it in GitHub Desktop.
jQuery/Bootstrap widget: dialog
<script type="text/html" id="modal-template">
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<span class="modal-title"></span>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
</script>
<script type="text/javascript">
$.widget("scw.dialog", {
options: {
size: "sm",
title: "",
body: "",
buttons: [
{
style: "primary",
text: "OK"
}
]
},
_create: function () {
var self = this;
self.$modal = $($("#modal-template").html()).appendTo(self.element);
self.$modal.find(".modal-dialog").addClass("modal-" + self.options.size);
self.$modal.find(".modal-title").text(self.options.title);
self.$modal.find(".modal-body").html(self.options.body);
var $footer = self.$modal.find(".modal-footer");
$.each(self.options.buttons, function () {
var defaults = {
command: $.noop,
argument: null
};
var options = $.extend(defaults, this);
var $button = $("<button type='button' class='btn'></button>");
$button.addClass("btn-" + options.style);
$button.text(options.text);
$button.click(function () {
self.$modal.one("hidden.bs.modal", function () {
options.command(options.argument);
self.destroy();
});
self.$modal.modal("hide");
});
$footer.append($button);
});
self.$modal.modal({
backdrop: "static",
keyboard: false
});
},
_destroy: function () {
var self = this;
self.$modal.remove();
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment