I was able to simplify some of the existing examples -- if you already have some javascript, it should be set up in just a minute or two of copy-paste.
Here's what it looks like:
Just add this somewhere in your Javascript file (I recommend at the start, for simplicity -- it doesn't have to live inside of any require or etc.)
function Modal(){
require(["underscore"],function(_) {
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function Modal(id, options) {
var _this = this;
_classCallCheck(this, Modal);
var modalOptions = _.extend({ show: false }, options);
// if "id" is the element that triggers the modal display, extract the actual id from it; otherwise use it as-is
var modalId = id //!= null && (typeof id === 'undefined' ? 'undefined' : _typeof(id)) === 'object' && id.jquery != null ? id.attr('data-target').slice(1) : id;
var header = $('<div>').addClass('modal-header');
var headerCloseButton = $('<button>').addClass('close').attr({
'type': 'button',
'data-dismiss': 'modal',
'aria-label': 'Close'
}).append($('<span>').attr('aria-hidden', true).text('×'));
this.title = $('<h3>').addClass('modal-title');
this.body = $('<div>').addClass('modal-body');
this.footer = $('<div>').addClass('modal-footer');
this.$el = $('<div>').addClass('modal mlts-modal').attr('id', modalId).append($('<div>').addClass('modal-dialog').append($('<div>').addClass('modal-content').append(header.append(headerCloseButton, this.title), this.body, this.footer)));
if (modalOptions.title != null) this.setTitle(modalOptions.title);
if (modalOptions.type === 'wide') this.$el.addClass('modal-wide');else if (modalOptions.type === 'noPadding') this.$el.addClass('mlts-modal-no-padding');
// remove the modal from the dom after it's hidden
if (modalOptions.destroyOnHide !== false) {
this.$el.on('hidden.bs.modal', function () {
return _this.$el.remove();
});
}
this.$el.modal(modalOptions);
}
_createClass(Modal, [{
key: 'setTitle',
value: function setTitle(titleText) {
this.title.text(titleText);
}
}, {
key: 'show',
value: function show() {
this.$el.modal('show');
}
}, {
key: 'hide',
value: function hide() {
this.$el.modal('hide');
}
}]);
window.Modal = Modal
return Modal;
})
}
Then to actually use it, you can copy-paste this code:
var myModal = new Modal('MyModalID-irrelevant-unless-you-want-many', {
title: 'Test Modal',
destroyOnHide: true,
type: 'wide'
});
$(myModal.$el).on("hide", function(){
// Not taking any action on hide, but you can if you want to!
})
myModal.body.addClass('mlts-modal-form-inline')
.append($('<p>Here is what goes in the body.. feel free to add Splunk inputs, reports, etc. Whatever your heart and SplunkJS skill desires.</p>'));
myModal.footer.append($('<button>').addClass('mlts-modal-submit').attr({
type: 'button',
'data-dismiss': 'modal'
}).addClass('btn btn-primary mlts-modal-submit').text('Close').on('click', function () {
// Not taking any action on Close... but I could!
}))
myModal.show(); // Launch it!
... View more
