simple utility for adding an overlay to help focus user on a page element

toggleOverlay()

function toggleOverlay() {
	if (document.getElementById('overlay') != null) {
		console.log(true);
		$('#overlay').fadeOut(300,function(){
			$(this).remove()
		});
	} else {
		var overlay = document.createElement('div');
		overlay.id = 'overlay';
		overlay.className = 'mfp-bg'; /* use existing styles */
		$(overlay).css({'opacity': 0.7, 'z-index':1}).prependTo('body');
	}
}

// can be used with data attribute:
<a class="trigger-widget" data-overlay="true">Open widget</a>
<script>
$('a').on('click',function(){

		if (el.data('overlay') == true) {
			toggleOverlay();
		}
  ...

});
</script>