Skip to content

Instantly share code, notes, and snippets.

@fprochazka
Created May 17, 2014 12:59
Show Gist options
  • Save fprochazka/771edf1d6b705023c0a4 to your computer and use it in GitHub Desktop.
Save fprochazka/771edf1d6b705023c0a4 to your computer and use it in GitHub Desktop.
Overlay-on-ajax extension for nette.ajax.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);
<!-- 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>
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment