Overlay-on-ajax extension for nette.ajax.js

ajax.overlay.js

(function ($) {

	$.nette.ext('overlay', {
		before: function (xhr, settings) {
			if (!settings.nette || !settings.nette.el) {
				return;
			}

			var tar = $(settings.nette.el);
			var container = tar.closest('.ajax-overlay');

			var text = container.data('overlay-text');
			if (typeof text == 'undefined') {
				text = '<p>Loading, please wait...</p>';
			}

			if (container.length == 0) {
				return;
			}

			var otherTarget = $(container.data('overlay-el'));
			if (otherTarget.length) {
				container = otherTarget.css({'position': 'relative'});
			}

			this.overlay = $('<div class="overlay ajaxOverlay">' + text + '</div>');
			this.container = container;
			this.overlay.appendTo(this.container);
			this.overlay.show();
		},
		success: function (payload) {
			if (!this.overlay) {
				return;
			}

			this.overlay.remove();
			this.overlay = null;
		},
		error: function (xhr, status) {
			if (!this.overlay) {
				return;
			}

			this.overlay.find('p').html("We're sorry, but something broke.<br>Please try again later.");

			var overlay = this.overlay;
			setTimeout(function () {
				overlay.remove();
			}, 3000);
			this.overlay = null;
		}
	}, { container: null, overlay: null });

})(jQuery);

modal.html

<!-- Example usage -->

<div n:snippet n:inner-if="$renderModal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content ajax-overlay">

			<form n:name="test" class="form-horizontal ajax">
				<button name="submit">click me, I will show overlay</button>
			</form>

			<a href="/" class="ajax">click me, I will show overlay</a>


		</div>

		<a href="/" class="ajax">click me, I won't show overlay</a>
	</div>
</div>

overlay.css

.ajax-overlay {
	position: relative;
}

.overlay {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000000;
	opacity: 0.7;
	filter: alpha(opacity=70);
	z-index: 1000;
}

.overlay.white {
	background: #ffffff;
}

.overlay.ajaxOverlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #ffffff;
	opacity: 0.8;
	filter: alpha(opacity=80);
}

.overlay.ajaxOverlay p {
	text-align: center;
	margin: 10% 0 0 0;
	font-family: 'OpenSansSemibold', Arial, sans-serif;
	font-weight: bold;
}

.overlay.block {
	display: block;
}

.modal .overlay {
	border-radius: 6px;
}