Modal overlay background

modaloverlay

<div class="overlay" tabindex="-1"></div>

.overlay {
    @include opacity (70, .70); // enabled
    z-index:998; // enabled
    z-index: -1;
    position: fixed;
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: #333; 
    opacity: 0;
}


	var pageOverlay = {
		vars: {
			exists: false
		},

		check: function() {
			if (!pageOverlay.vars.exists) {
				pageOverlay.vars.exists = $(".overlay").size();

				if (pageOverlay.vars.exists <= 0) {
					$("body").append('<div class="overlay" tabindex="-1"></div>');
				}
			}
		},

		show: function() {
			pageOverlay.check();
			$("body").addClass("show-overlay");
		},

		hide: function() {
			$("body").removeClass("show-overlay");
		},

		toggle: function() {
			pageOverlay.check();

			$("body").toggleClass("show-overlay");
		}
	}