Skip to content

Instantly share code, notes, and snippets.

@Mte90
Last active August 29, 2015 14:01
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 Mte90/4117ec381a577df04793 to your computer and use it in GitHub Desktop.
Save Mte90/4117ec381a577df04793 to your computer and use it in GitHub Desktop.
Modal in javascript vanilla
//Based on http://jsfiddle.net/i_like_robots/W2DA8/
(function(name, context, definition) {
if (typeof define === 'function' && define.amd) {
define(definition);
}
else if (typeof module !== 'undefined' && module.exports) {
module.exports = definition();
}
else {
context[name] = definition();
}
})('Modal', this, function() {
var Modal = function(element) {
this.target = element;
if (!this.isOpen) {
this._init();
}
};
Modal.prototype._init = function() {
var self = this;
this.overlay = document.createElement('div');
this.overlay.className = 'overlay_';
this.overlay.style.position = 'fixed';
this.overlay.style.top = 0;
this.overlay.style.right = 0;
this.overlay.style.bottom = 0;
this.overlay.style.left = 0;
this.overlay.style.zIndex = '99999';
this.overlay.style.background = 'rgba(0, 0, 0, .5)';
this.overlay.setAttribute('tabindex', -1);
this.modalWindow = document.createElement('div');
this.modalWindow.className = 'modal';
this.modalWindow.style.position = 'fixed';
this.modalWindow.style.top = 0;
this.modalWindow.style.right = 0;
this.modalWindow.style.bottom = 0;
this.modalWindow.style.left = 0;
this.modalWindow.style.width = '80%';
this.modalWindow.style.height = '30%';
this.modalWindow.style.margin = 'auto';
this.modalWindow.style.background = '#EEE';
this.modalWindow.style.zIndex = '99999';
this.modalWindow.setAttribute('role', 'dialog');
this.modalWindow.setAttribute('tabindex', 0);
this.modalWrapper = document.createElement('div');
this.modalWrapper.className = 'modal__wrapper';
this.modalWrapper.style.overflow = 'auto';
this.modalWrapper.style.height = '100%';
this.modalContent = document.createElement('div');
this.modalContent.className = 'modal__content';
this.modalContent.style.padding = '1em';
this.modalContent.style.textAlign = 'center';
this.closeButton = document.createElement('button');
this.closeButton.className = 'modal__close';
this.closeButton.style.left = '10px';
this.closeButton.style.top = '-45px';
this.closeButton.style.position = 'relative';
this.closeButton.innerHTML = 'Close';
this.closeButton.setAttribute('type', 'button');
this.closeButton.onclick = function() {
self.close();
};
this.installButton = document.createElement('button');
this.installButton.className = 'modal__install';
this.installButton.style.left = '10px';
this.installButton.style.top = '-45px';
this.installButton.style.marginRight = '10px';
this.installButton.style.position = 'relative';
this.installButton.innerHTML = 'OK';
this.installButton.setAttribute('type', 'button');
this.installButton.onclick = function() {
self.close();
};
this.modalWindow.appendChild(this.modalWrapper);
this.modalWrapper.appendChild(this.modalContent);
this.modalWindow.appendChild(this.installButton);
this.modalWindow.appendChild(this.closeButton);
this.isOpen = false;
};
Modal.prototype.open = function(text_modal, callback) {
if (this.isOpen) {
return;
}
this.modalContent.innerHTML = text_modal;
this.target.appendChild(this.overlay);
this.target.appendChild(this.modalWindow);
this.modalWindow.focus();
this.isOpen = true;
if (callback) {
callback.call(this);
}
};
Modal.prototype.close = function(callback) {
this.target.removeChild(this.modalWindow);
this.target.removeChild(this.overlay);
this.isOpen = false;
if (callback) {
callback.call(this);
}
};
Modal.prototype.teardown = function() {
if (this.isOpen) {
this.close();
}
delete this.installButton;
delete this.closeButton;
delete this.modalContent;
delete this.modalWrapper;
delete this.modalWindow;
delete this.overlay;
delete this.isOpen;
};
return Modal;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment