Skip to content

Instantly share code, notes, and snippets.

@christophervigliotti

christophervigliotti/overlay.css

Last active August 29, 2015 14:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save christophervigliotti/f6a866d2acb879eb29a3 to your computer and use it in GitHub Desktop.
Save christophervigliotti/f6a866d2acb879eb29a3 to your computer and use it in GitHub Desktop.
Download ZIP
Dirt-Simple Overlay
Raw
overlay.css
.overlay {
background-color:white;
filter:alpha(opacity=50); /* IE */
opacity:0.5; /* Safari, Opera */
-moz-opacity:0.50; /* FireFox */
z-index:20;
height:100%;
width:100%;
background-repeat:no-repeat;
background-position:center;
position:absolute;
top:0px;
left:0px;
}
Raw
overlay.htm
...your html here...
<body>
<div id="overlay" class="overlay" style="display:none;"></div>
<link rel="stylesheet" type="text/css" href="overlay.css" />
<script type="text/javascript" src="overlay.js"></script>
...your html here...
Raw
overlay.js
// shows the overlay
function showOverlay(){
overlayVisible = true;
$('#overlay').show();
}
// hides the overlay
function hideOverlay(){
overlayVisible = false;
$('#overlay').hide();
}
// show whenever ajax starts
$(document).ajaxStart(function() {
showOverlay();
});
// hide whenever ajax is done
$(document).ajaxComplete(function() {
hideOverlay();
});
// when an html element with the data-show-overlay-on-click="true" attribute is present, show that overlay!
$(document).on('click', '[data-show-overlay-on-click="true"]', function () {
showOverlay();
});
// onbeforeunload is not the best cross-platform solution...but this will show the overlay when a page refresh begins (fancy)
$(window).bind('beforeunload', function(){
showOverlay();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment