Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 16c28468b9
Fetching contributors…

Cannot retrieve contributors at this time

248 lines (201 sloc) 8.176 kb
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Ender-overlay: Configuration Examples</title>
<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" href="ender-overlay.css" type="text/css">
<!-- syntax highlights -->
<link rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/github.min.css">
</head>
<body>
<div id="container" class="demo">
<ul class="breadcrumb">
<li><a href="../index.html" class="back-home">Main Page &raquo;</a></li>
</ul>
<h1>Configuration Examples</h1>
<p>Please check out the <a href="basics.html">configuration tutorial</a> and <a href="../index.html">documentation</a> too.</p>
<h2>Do Not Show Mask</h2>
<div class="clr example-row">
<a id="trigger-maskoff" class="thumbs"><img src="http://farm6.static.flickr.com/5123/5329325629_ba31d93a48_t.jpg" alt="The Raid" width="100" height="100"></a>
<div id="overlay-maskoff" class="ender-overlay overlay-image">
<a class="close close-button" title="Close">&#9747;</a>
<img src="http://farm6.static.flickr.com/5123/5329325629_ba31d93a48.jpg" alt="The Raid" width="500" height="500">
</div> <!-- #overlay-mask -->
<pre><code class="javascript">$(&quot;#overlay-maskoff&quot;).overlay({
trigger: &quot;#trigger-maskoff&quot;,
showMask: false
});</code></pre>
</div> <!-- .example-row -->
<h2>Customize Mask</h2>
<div class="clr example-row">
<a id="trigger-mask" class="thumbs"><img src="http://farm6.static.flickr.com/5008/5248981729_3a05d42d32_t.jpg" alt="Undercover" width="100" height="100"></a>
<div id="overlay-mask" class="ender-overlay overlay-image">
<a class="close close-button" title="Close">&#9747;</a>
<img src="http://farm6.static.flickr.com/5008/5248981729_3a05d42d32.jpg" alt="Undercover" width="500" height="500">
</div> <!-- #overlay-mask -->
<pre><code class="javascript">$(&quot;#overlay-mask&quot;).overlay({
trigger: &quot;#trigger-mask&quot;,
mask: {
opacity: 0.3,
color: &quot;magenta&quot;
}
});</code></pre>
</div> <!-- .example-row -->
<h2>Fixed Overlay</h2>
<p>Open the overlay and scroll the page. Please </p>
<div class="clr example-row">
<a id="trigger-fixed" class="thumbs"><img src="http://farm6.static.flickr.com/5241/5319178865_ab54fb3e02_t.jpg" alt="The Payment" width="100" height="100"></a>
<div id="overlay-fixed" class="ender-overlay overlay-image">
<a class="close close-button" title="Close">&#9747;</a>
<img src="http://farm6.static.flickr.com/5241/5319178865_ab54fb3e02.jpg" alt="The Payment" width="500" height="500">
</div> <!-- #overlay-mask -->
<pre><code class="javascript">$(&quot;#overlay-fixed&quot;).overlay({
trigger: &quot;#trigger-fixed&quot;,
position: &quot;fixed&quot;
});</code></pre>
</div> <!-- .example-row -->
<h2>Create Modal Window</h2>
<div class="clr example-row">
<a id="trigger-modal">Open modal overlay</a>
<div id="overlay-modal" class="ender-overlay overlay-modal">
<h1>Are you sure?</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a class="close">Yes</a> <a class="close">No</a>
</div> <!-- #overlay-mask -->
<pre><code class="javascript">$(&quot;#overlay-modal&quot;).overlay({
trigger: &quot;#trigger-modal&quot;,
closeOnEsc: false,
closeOnMaskClick: false
});</code></pre>
</div> <!-- .example-row -->
<h2>Load Content with AJAX</h2>
<p>Create the overlay wrapper dynamically and load the content with AJAX. In this case I used <a href="https://github.com/ded/reqwest">Reqwest</a> as an AJAX lib. You can check out the loaded content directly here: <a href="ajax-content.html">ajax-content.html</a></p>
<div class="clr example-row">
<a id="trigger-ajax">Open overlay with AJAX content</a>
<pre><code class="javascript">// in this case, you must define the width of the overlay with CSS
$('&lt;div class=&quot;overlay-ajax&quot;&gt;&lt;/div&gt;').overlay({
trigger: &quot;#trigger-ajax&quot;,
onBeforeOpen: function (o) {
var overlayWrp = o.getOverlay();
overlayWrp
.empty()
.append('&lt;a class=&quot;close close-button&quot;&gt;&amp;#9747;&lt;/a&gt;');
$.ajax({
url: &quot;ajax-content.html&quot;,
success: function (resp) {
overlayWrp.append(resp);
}
});
}
});</code></pre>
</div>
<h2>Custom Animations</h2>
<p>Please check out the documentation of <a href="https://github.com/ded/morpheus">Morpheus</a> for animation information. The <samp>animationIn</samp> and <samp>animationOut</samp> objects are passed directly into Morpheus.</p>
<div class="clr example-row">
<a id="trigger-animation" class="thumbs"><img src="http://farm6.static.flickr.com/5250/5348822142_9c1e7e8bdd_t.jpg" alt="The Price of Information" width="100" height="100"></a>
<div id="overlay-animation" class="ender-overlay overlay-image">
<a class="close close-button" title="Close">&#9747;</a>
<img src="http://farm6.static.flickr.com/5250/5348822142_9c1e7e8bdd.jpg" alt="The Price of Information" width="500" height="500">
</div> <!-- #overlay-mask -->
<pre><code class="javascript">$(&quot;#overlay-animation&quot;).overlay({
trigger: &quot;#trigger-animation&quot;,
position: &quot;fixed&quot;,
startAnimationCss: {
opacity: 0,
top: 0
},
animationIn: {
opacity: 1,
top: 80,
duration: 400
},
animationOut: {
opacity: 0,
top: -200,
duration: 400
}
});</code></pre>
</div> <!-- .example-row -->
<p><a href="../index.html">Go back to the documentation</a></p>
</div> <!-- #container -->
<script src="../ender.min.js"></script>
<script src="../ender.overlay.js"></script>
<script src="reqwest.min.js"></script>
<script>
$(document).ready(function () {
// do not show mask
$("#overlay-maskoff").overlay({
trigger: "#trigger-maskoff",
showMask: false
});
// custom mask
$("#overlay-mask").overlay({
trigger: "#trigger-mask",
mask: {
opacity: 0.3,
color: "magenta"
}
});
// fixed
$("#overlay-fixed").overlay({
trigger: "#trigger-fixed",
position: "fixed"
});
// modal window
$("#overlay-modal").overlay({
trigger: "#trigger-modal",
closeOnEsc: false,
closeOnMaskClick: false
});
// AJAX
$('<div class="overlay-ajax"></div>').overlay({
trigger: "#trigger-ajax",
onBeforeOpen: function (o) {
var overlayWrp = o.getOverlay();
overlayWrp
.empty()
.append('<a class="close close-button">&#9747;</a>');
$.ajax({
url: "ajax-content.html",
success: function (resp) {
overlayWrp.append(resp);
}
});
}
});
// custom animation
$("#overlay-animation").overlay({
trigger: "#trigger-animation",
position: "fixed",
startAnimationCss: {
opacity: 0,
top: 0
},
animationIn: {
opacity: 1,
top: 80,
duration: 400
},
animationOut: {
opacity: 0,
top: -200,
duration: 400
}
});
});
</script>
<script src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-25617420-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.