Tiny Notification module

by jorgeluis

HTML

<div id="masthead"></div>

CSS

.alert {
  position: relative;
  background: tomato;
  padding: 1em;
  padding-right: 40px;
}

.alert .close {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: default;
  font-size: 14px;
  color: white;
}

JavaScript

function Notification(msg) {
	var el = document.createElement('div');
  el.setAttribute('class', 'alert');

	var closeIcon = document.createElement('div');
  closeIcon.setAttribute('class', 'close');
	closeIcon.appendChild(document.createTextNode('Close'));

	el.appendChild(document.createTextNode(msg));
	el.appendChild(closeIcon);

	var header = document.getElementById('masthead') || document.getElementById('header');
	if(!header) return false;
	insertAfter(el, header);

	this.close = function() {
		this.parentNode.parentNode.removeChild(el);
	}
  
  closeIcon.addEventListener('click', this.close);

}


function insertAfter(newNode, referenceNode) {
	referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}



var help = new Notification('help');