forked from tommcfarlin/Simple-Overlay
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (134 loc) · 4.74 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.overlay.js"></script>
<script type="text/javascript" src="js/site.js"></script>
<title>Simple Overlay Demo</title>
</head>
<body>
<div id="container">
<h1>Simple Overlay Demo</h1>
<p>
Simple Overlay can be used in a variety of different ways. Some examples of how to use the plugin are below. All code used is below.
</p>
<h2>
Using Any Element
</h2>
<p id="paragraph-trigger">
You can trigger the overlay using any element (such as paragraph elements). Click on this sentence for a demo.
Click on the overlay to close it.
</p>
<p>
You can trigger overlays by applying it to any HTML element by calling it on any element.
</p>
<h3>
Code Used
</h3>
<pre class="brush: js">
$('#paragraph-trigger').click(function() {
$(this).overlay({
closeOnClick: true
});
});
</pre>
<h2>
Using an Anchor
</h2>
<p>
You can display overlays by also using anchor elements. It's helpful to <a href="http://api.jquery.com/event.preventDefault/">prevent the default action</a>
from occuring before displaying the overlay. Click on <a id="anchor-trigger" href="javascript:;">this anchor</a> for a demo. The gloss effect was achieved by passing
<code>glossy: true</code> to the plugin options.
</p>
<h3>
Code Used
</h3>
<pre class="brush: js">
$('#anchor-trigger').click(function(evt) {
evt.preventDefault();
$(this).overlay({
color: 'red',
closeOnClick: true,
glossy: true
});
});
</pre>
<h2>
Callbacks
</h2>
<p>
The plugin supports the use of callbacks for both when it is displayed and when it is hidden. This allows you to take action after the overlay fires.
Examples would be displaying a custom message, modal dialog, or another prompt.
</p>
<p>
For a trivial example, click <a id="modal-trigger" href="javascript:;">here</a>. This will add simple modal to the page once the overlay has been displayed.
</p>
<h3>
Code Used
</h3>
<pre class="brush: js">
$('#modal-trigger').click(function(evt) {
evt.preventDefault();
$(this).overlay({
effect: 'fade',
opacity: 0.8,
onShow: function() {
$('body').append(
$('<div id="modal">This is my modal. Click to close it.</div>')
.css({
background: '#fff',
zIndex: 3000,
padding: '10px',
width: '640px',
height: '240px',
margin: '0 auto',
opacity: 1,
position: 'absolute',
top: '10%',
left: '10%'
}).click(function() {
$(this).remove();
$('.overlay:first').fadeOut('fast', function() {
$(this).remove();
});
})
);
}
});
});
</pre>
<h2>
Photo Overlay
</h2>
<p>
You can also provide an overlay on top of an image. Click on the photo below and notice the overlay come down. Using the onShow callback, you can wire up
an (h/t to <a href="http://twitter.com/alex_morrison">@Alex_Morrison</a> for this suggested use :) event handler to prevent right-clicking.
</p>
<div id="photo-trigger" style="width:720px;height: 478px;">
<img src="http://a3.sphotos.ak.fbcdn.net/hphotos-ak-snc6/259966_10100500093774910_4902926_62592512_5420140_n.jpg" alt="" />
</div>
<h3>
Code Used
</h3>
<pre class="brush: js">
$('#photo-trigger').click(function() {
$(this).overlay({
color: '#ccc',
effect: 'fade',
glossy: true,
container: '#photo-trigger',
onShow: function() {
$(this).click(function(evt) {
evt.preventDefault();
}).bind('contextmenu', function(evt) {
evt.preventDefault();
});
}
});
});
</pre>
</div>
</body>
</html>