Dialogue Class

dialogue.css

dialog>* {
	padding: 1em;
	z-index: 50;
	position: relative;
	display: table;
}
/*dialog*/

dialog {
	width: 60%;
	overflow: auto;
	display: block;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	z-index: 5;
	padding: 0;
	border: none;
}
dialog:not([open]) {
	display: none;
}
dialog[open] {
	display: block;
}
dialog.fade {
	top: -100%;
	transition: opacity .3s, top .3s;
}
dialog.in {
	top: 5em;
}
dialog header {
	padding: 1em 1em 0;
	clear: both;
	float: left;
	position: relative;
	width: 100%;
}
dialog header button {
	float: right;
}
dialog header h3 {
	line-height: 1.7em;
	margin: 0 0 0.5em;
}
dialog article {
	max-height: 400px;
	padding: 1em 1em 0 1em;
	overflow-y: auto;
	width: 100%;
}
dialog footer {
	padding: 1em 1em 0;
	margin-bottom: 0;
	padding-top: 0px;
	position: relative;
	/*float: left;*/
	width: 100%;
	margin-top: 1rem;
}
dialog .close {
	float: right;
}
.modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 4;
	content: "";
	display: block;
	height: 100%;
	width: 100%;
}
/* customization */

dialog {
	background-color: #fff;
	border-radius: 6px;
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
dialog>* {
	background-color: #fff;
}
dialog header {
	border-bottom: 1px solid #eee;
}
dialog footer {
	background-color: #f5f5f5;
	border-radius: 0 0 6px 6px;
	box-shadow: inset 0 1px 0 #fff
}
.modal-backdrop {
	background-color: rgba(000, 000, 000, 0.5);
}
dialog button.close {
	color: #ccc;
	border-color: #ccc;
	background-color: #fff;
}
dialog button.close:hover {
	color: #FFF;
	border: 1px solid #000;
	background-color: #000;
}

dialogue.js

class Dialogue {
	constructor(elm, cfg) {
		var self = this;
		self._def = {
			backdrop: true,
			keyboard: true
		};
		if (cfg == undefined) cfg = {}; self._cfg = {...self._def, ...cfg};
		self.$element = elm;
		var modal_dismiss = self.$element.querySelectorAll('[data-dismiss="modal"]'); // rep elem
		modal_dismiss.forEach(function(m){
			m.addEventListener('click', function(e){
				self.hide(e);
			});
			m.addEventListener('touchstart', function(e){
				self.hide(e);
			})
		});
		self.escape_listener = self.escape_handler(self);
	}
	escape_handler = (mdl) => (e) => {
		if(e && e.which == 27) mdl.hide();
	}
	toggle() {
		return this[!this.isShown ? 'show' : 'hide']();
	}
	show() {
		var self = this;
		// display
		self.$element.open = true;
		setTimeout(()=>{ 
			self.$element.classList.add('in'); 
		},100);
		// is shown
		if (self.isShown) return;
		self.isShown = true;
		self.escape.call(self)
		// backdrop
		if (self._cfg.backdrop === true) {
			self.backdrop.call(self, function() {
				document.body.append(self.$element);
			});
		}
	}
	hide(e) {
		var self = this;
		// prevent dismiss 
		e && e.preventDefault();
		// is shown
		if (!self.isShown) return;
		self.isShown = false;
		self.escape.call(self)
		self.$element.classList.remove('in');
		self.hideWithTransition.call(self);
	}
	escape() {
		var self = this;
		if (self.isShown && self._cfg.keyboard) {
			document.addEventListener('keyup', self.escape_listener );
		} else if (!self.isShown) {
			document.removeEventListener('keyup', self.escape_listener );
		}
	}
	backdrop(callback) {
		var self = this,
			animate = self.$element.classList.contains('fade') ? 'fade' : '';
		if (self.isShown && self._cfg.backdrop) {
			self.$backdrop = document.createElement("div");
			self.$backdrop.classList.add('modal-backdrop');
			if (animate != '') {
				self.$backdrop.classList.add(animate)
			}
			document.body.appendChild(self.$backdrop)
			self.$backdrop.addEventListener('click', function(e){
				self.hide(e)
			})
			self.$backdrop.classList.add('in')
		} else if (!self.isShown && self.$backdrop) {
			this.$backdrop.classList.remove('in')
			self.removeBackdrop.call(this);
		} else if (callback) {
			callback()
		}
	}
	removeBackdrop() {
		this.$backdrop.remove()
		this.$backdrop = null
	}
	hideModal(){
		var self = this;
		self.$element.open = false;
		self.backdrop.call(self);
	}
	hideWithTransition() {
		var self = this;
		setTimeout(function() {
			self.hideModal.call(self)
		}, 500);
	}
}
export {Dialogue}

index.html

<dialog class="modal-dialogue modal fade" id='dialogue'>
	<header>
		<button data-dismiss="modal">X</button>
		<h3>Dialogue</h3>
	</header>
	<article>
		<button 
			data-dismiss="modal" 
			class="cancel btn ren_minimal lg">
			Cancel
		</button>
	</article>
	<footer>
	</footer>
</dialog>

index.js

var _DLG = new Dialogue(document.querySelector('#dialogue'), {
	backdrop: true
});

_DLG.show();