Skip to content

Commit d9f3f7d

Browse files
lewisgoddardlewisgoddard
committed
Release 2.4
1 parent a288abc commit d9f3f7d

File tree

4 files changed

+302
-80
lines changed

4 files changed

+302
-80
lines changed

‎examples.html‎

Lines changed: 99 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -6,116 +6,143 @@
66
<meta charset="UTF-8">
77
<title>jQuery.leanModal2.js</title>
88

9-
<script src="https://cdn.jsdelivr.net/g/jquery,jquery.equalize"></script>
9+
<script src="https://cdn.jsdelivr.net/g/jquery,jquery.equalize,jquery.downboy"></script>
1010
<script src="jQuery.leanModal2.js"></script>
1111

12-
<link rel="icon" href="http://eustasy.org/favicon.ico">
13-
<link rel="shortcut icon" href="http://eustasy.org/favicon.ico">
12+
<link rel="icon" href="https://eustasy.org/favicon.ico">
13+
<link rel="shortcut icon" href="https://eustasy.org/favicon.ico">
1414

1515
<link rel="stylesheet" href="https://cdn.jsdelivr.net/g/normalize,colors.css">
16+
<link rel="stylesheet" href="grid.css">
1617
<style>
17-
body { margin: 0 auto; width: 1000px; }
18-
header, footer { padding: 50px }
19-
header { margin-bottom: 3px; }
20-
footer { margin-top: 3px; }
21-
section { display: inline-block; margin: 3px 0; padding: 50px 50px 150px; position: relative; width: 397px; vertical-align: top; }
22-
code { display: block; padding: 10px; line-height: 2; white-space: pre-wrap; }
18+
header,
19+
.section-guide,
20+
footer {
21+
margin: 0 auto;
22+
width: 100%;
23+
}
24+
header { padding: 5rem; }
25+
footer { padding: 5rem 5rem 3rem; }
26+
.section-guide {
27+
max-width: 80rem;
28+
}
29+
section {
30+
display: inline-block;
31+
max-width: 80rem;
32+
padding: 0 5rem;
33+
position: relative;
34+
vertical-align: top;
35+
}
36+
code {
37+
display: block;
38+
line-height: 2;
39+
padding: 1rem;
40+
text-align: left;
41+
white-space: pre-wrap;
42+
}
2343
a { color: inherit; text-decoration: none; }
44+
.button {
45+
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
46+
0 2px 10px 0 rgba(0,0,0,0.12);
47+
margin: 2rem 0;
48+
padding: 1rem;
49+
transition: all 200ms ease-in-out;
50+
}
51+
.button:hover { opacity: 0.9; }
52+
.button:active { box-shadow: none; }
2453
.align-center { text-align: center; }
2554
.align-left { text-align: left; }
55+
.align-right { text-align: right; }
2656
.display-none { display: none; }
2757
.display-block { display: block; }
28-
.modal { background: #fefefe; padding: 10px; width: 500px; }
58+
.modal {
59+
max-width: 50rem;
60+
padding: 1rem 3rem;
61+
z-index: 11000;
62+
}
63+
.modal *:first-child { margin-top: 0; }
2964
.rounded { border-radius: 5px; }
30-
.button-bottom { background: #fefefe; padding: 10px; bottom: 50px; left: 50px; margin: 0; position: absolute; right: 50px; }
65+
/* TODO Remove background-white */
66+
.background-white { background: white; }
3167
</style>
3268

3369
</head>
3470

35-
<body class="align-center background-peter-river color-white">
71+
<body class="align-center background-belize-hole color-white">
3672

37-
<header class="background-belize-hole">
73+
<header>
3874
<h1>jQuery.leanModal2</h1>
3975
<p>A pure solution to putting your own HTML and CSS to work as a modal dialogue.</p>
4076
</header>
4177

42-
<div class="group">
43-
44-
<section class="leanmodal-basic background-belize-hole equalize" data-modal-id="#basic-example">
45-
<h2>Basic</h2>
46-
<code class="background-midnight-blue color-white rounded">$('.leanmodal').leanModal();</code>
47-
<h3 class="button-bottom color-belize-hole display-block rounded">Basic Example</h3>
48-
</section>
49-
50-
<div id="basic-example" class="color-3 display-none modal rounded">
51-
<h3>Hello!</h3>
52-
<p>Modal thing.</p>
53-
<p>Basic</p>
54-
</div>
55-
56-
<script>$('.leanmodal-basic').leanModal();</script>
57-
58-
<section class="leanmodal-close background-belize-hole equalize" data-modal-id="#close-example">
59-
<h2>with a Close button</h2>
60-
<code class="align-left background-midnight-blue color-white rounded">$('.leanmodal').leanModal({
61-
closeButton: '.close'
78+
<div class="section-guide grid">
79+
80+
<section class="whole smablet-half leanmodal-defaults equalize" data-modal-id="#defaults-example">
81+
<h2>Defaults</h2>
82+
<code class="background-midnight-blue color-white rounded">$('.leanmodal').leanModal({
83+
top: '15vh',
84+
overlayOpacity: 0.7,
85+
closeButton: '.js-leanmodal-close',
86+
disableCloseOnOverlayClick: false,
87+
disableCloseOnEscape: false,
88+
fadeTime: 200,
6289
});</code>
63-
<h3 class="button-bottom color-belize-hole display-block rounded" href="#close-example">Close Button Example</h3>
90+
<h3 class="background-white button color-belize-hole display-block rounded">Defaults Example</h3>
6491
</section>
6592

66-
<div id="close-example" class="color-3 display-none modal rounded">
93+
<div id="defaults-example" class="background-white color-3 display-none modal rounded">
6794
<h3>Hello!</h3>
68-
<p>Modal thing.</p>
69-
<p>Pass your own</p>
70-
<p><a class="close color-pomegranate" href="#close">Close</a></p>
95+
<p>This is a modal using our defaults.</p>
96+
<a href="#" class="color-pomegranate js-leanmodal-close">Close</a>
7197
</div>
7298

73-
<script>$('.leanmodal-close').leanModal( { closeButton: '.close' } );</script>
74-
75-
</div>
76-
77-
<div class="group">
78-
79-
<section class="leanmodal-opacity background-belize-hole equalize" data-modal-id="#opacity-example">
80-
<h2>with a custom Opacity</h2>
81-
<code class="align-left background-midnight-blue color-white rounded">$('.leanmodal').leanModal({
82-
overlayOpacity: 0.9
99+
<script>$('.leanmodal-defaults').leanModal();</script>
100+
101+
<section class="whole smablet-half leanmodal-modified equalize" data-modal-id="#modified-example">
102+
<h2>Modified</h2>
103+
<code class="background-midnight-blue color-white rounded">$('.leanmodal').leanModal({
104+
top: '1em',
105+
overlayOpacity: 0.3,
106+
closeButton: '.close-it',
107+
disableCloseOnOverlayClick: true,
108+
disableCloseOnEscape: true,
109+
fadeTime: 2000,
83110
});</code>
84-
<h3 class="button-bottom color-belize-hole display-block rounded">Custom Opacity Example</h3>
111+
<h3 class="background-white button color-belize-hole display-block rounded">Modified Example</h3>
85112
</section>
86113

87-
<div id="opacity-example" class="color-3 display-none modal rounded">
88-
<h2>with a custom Opacity</h2>
89-
<p>Set the background opacity to whatever you like by passing in an options array like you would for a close button.</p>
90-
</div>
91-
92-
<script>$('.leanmodal-opacity').leanModal( { overlayOpacity: 0.9 } );</script>
93-
94-
<section class="leanmodal-both background-belize-hole equalize" data-modal-id="#both-example">
95-
<h2>Both!</h2>
96-
<code class="align-left background-midnight-blue color-white rounded">$('.leanmodal').leanModal({
97-
closeButton: '.close',
98-
overlayOpacity: 0.9
99-
});</code>
100-
<h3 class="button-bottom color-belize-hole display-block rounded" href="#both-example">Close Button Example</h3>
101-
</section>
102-
103-
<div id="both-example" class="color-3 display-none modal rounded">
114+
<div id="modified-example" class="background-white color-3 display-none modal rounded">
104115
<h3>Hello!</h3>
105-
<p>Pass your own</p>
106-
<p><a class="close color-pomegranate" href="#close">Close</a></p>
116+
<p>This is a modal using all the options.</p>
117+
<a href="#" class="color-pomegranate close-it">Close</a>
107118
</div>
108119

109-
<script>$('.leanmodal-both').leanModal( { closeButton: '.close', overlayOpacity: '0.9' } );</script>
120+
<script>$('.leanmodal-modified').leanModal({
121+
top: '1em',
122+
overlayOpacity: 0.3,
123+
closeButton: '.close-it',
124+
disableCloseOnOverlayClick: true,
125+
disableCloseOnEscape: true,
126+
fadeTime: 2000,
127+
});</script>
110128

111129
</div>
112130

113-
<footer class="background-belize-hole">
131+
<footer>
114132
<p><a href="http://opensource.org/licenses/MIT">MIT License</a> &nbsp;&middot;&nbsp; <a href="https://github.com/eustasy/jQuery.leanModal2">GitHub</a> &nbsp;&middot;&nbsp; <a href="http://eustasy.org/">eustasy</a></p>
115133
</footer>
116134

117-
<script>equalize();</script>
118-
119135
</body>
120136

137+
<script>
138+
$(function() {
139+
equalize();
140+
downBoy('footer');
141+
window.onresize = function() {
142+
equalize();
143+
downBoy('footer');
144+
};
145+
});
146+
</script>
147+
121148
</html>

0 commit comments

Comments
 (0)