Skip to content

Commit 3e6af23

Browse files
lewisgoddardlewisgoddard
committed
update docs, fix .find error
1 parent e2cbd0b commit 3e6af23

3 files changed

Lines changed: 42 additions & 48 deletions

File tree

‎index.html‎

Lines changed: 29 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -10,27 +10,31 @@
1010
<meta name="keywords" content="eustasy jquery plugin modal dialog">
1111
<meta name="description" content="A pure solution to putting your own HTML and CSS to work as a modal dialogue.">
1212
<title>jQuery.leanModal2.js &nbsp;&middot;&nbsp; eustasy Labs</title>
13-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/gh/eustasy/Colors.css@1/colors.min.css,gh/necolas/normalize.css@8/normalize.min.css">
14-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400|Lusitana|Source+Code+Pro" data-noprefix>
13+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/gh/necolas/normalize.css@8/normalize.min.css,gh/eustasy/Colors.css@2/flatui.min.css">
1514
<link rel="stylesheet" href="https://labs.eustasy.org/assets/css/grid.min.css">
1615
<link rel="stylesheet" href="https://labs.eustasy.org/assets/css/labs.css">
17-
<script>
18-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
19-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
20-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
21-
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
22-
ga('create', 'UA-45667989-11', 'eustasy.org');
23-
ga('send', 'pageview');
24-
</script>
25-
<script src="https://cdn.jsdelivr.net/combine/gh/jquery/jquery@3/dist/jquery.min.js,gh/jackmoore/autosize@4/dist/autosize.min.js,gh/eustasy/jQuery.equalize@1/jquery.equalize.min.js,gh/eustasy/jQuery.downBoy@1/jquery.downboy.min.js"></script>
16+
<script src="https://cdn.jsdelivr.net/combine/gh/jquery/jquery@3/dist/jquery.min.js,gh/jackmoore/autosize@6/dist/autosize.min.js"></script>
2617
<script src="jQuery.leanModal2.js"></script>
2718
<style>
28-
@media (max-width: 768px) {
29-
.js-leanmodal-modal {
30-
border-bottom-left-radius: 0;
31-
border-bottom-right-radius: 0;
32-
width: 100%;
33-
}
19+
code, pre, .code, .code-ref {
20+
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
21+
}
22+
p {
23+
line-height: 1.5;
24+
margin-bottom: 1em;
25+
font-size: 1.125em;
26+
font-family: system-ui, sans-serif;
27+
max-width: 40em;
28+
text-align: left;
29+
}
30+
.code-ref {
31+
background: var(--flatui-clouds);
32+
color: var(--flatui-belize-hole);
33+
padding: 0.1em 0.3em;
34+
border-radius: 3px;
35+
}
36+
p.text-center {
37+
max-width: none;
3438
}
3539
</style>
3640
</head>
@@ -44,20 +48,21 @@
4448
</a>
4549
<header>
4650
<h1>jQuery.leanModal2</h1>
47-
<p>A pure solution to putting your own HTML and CSS to work as a modal dialogue.</p>
48-
<p class="sub-title">by <a href="https://labs.eustasy.org/">eustasy Labs</a></p>
51+
<p class="text-center">A pure solution to putting your own HTML and CSS to work as a modal dialogue.</p>
52+
<p class="text-center sub-title">by <a href="https://labs.eustasy.org/">eustasy Labs</a></p>
4953
</header>
5054
<hr class="section-breaker">
5155

5256
<div class="section-guide grid">
5357

5458
<section class="whole smablet-half equalize">
5559
<h2>Installation &amp; Usage</h2>
56-
<p>Include after jQuery, preferably from jsDelivr. Then add a trigger element with a <code>data-modal-id</code> attribute pointing to the <code>id</code> of the modal element, and initialise leanModal on the trigger's selector. A standard <code>href</code> attribute can be used instead of <code>data-modal-id</code>.</p>
60+
<p>Include after jQuery, preferably from jsDelivr. Then add a trigger element with a <span class="code-ref">data-modal-id</span> attribute pointing to the <span class="code-ref">id</span> of the modal element, and initialise leanModal on the trigger's selector. A standard <span class="code-ref">href</span> attribute can be used instead of <span class="code-ref">data-modal-id</span>.</p>
61+
<p>Note: The modal element must be a sibling to the trigger element, or a child of a sibling element. This is because the plugin uses jQuery's <span class="code-ref">.next()</span> method to find the modal.</p>
5762
</section>
5863

5964
<section class="whole smablet-half equalize">
60-
<textarea class="code rounded" readonly><script src="https://cdn.jsdelivr.net/gh/eustasy/jQuery.leanModal2@2/jQuery.leanModal2.min.js"></script>
65+
<textarea class="code rounded" readonly><script src="jQuery.leanModal2.min.js"></script>
6166

6267
<button class="js-leanmodal-trigger" data-modal-id="#my-modal">Open</button>
6368

@@ -110,18 +115,18 @@ <h3 class="button clickable rounded leanmodal-modified" data-modal-id="#modified
110115
<hr class="section-breaker">
111116

112117
<footer>
113-
<p><a href="https://github.com/eustasy/jQuery.leanModal2/blob/master/LICENSE.md">MIT License</a> &nbsp;&middot;&nbsp; <a href="https://github.com/eustasy/jQuery.leanModal2">GitHub</a> &nbsp;&middot;&nbsp; <a href="https://github.com/eustasy/jQuery.leanModal2/releases">Releases</a></p>
118+
<p class="text-center"><a href="https://github.com/eustasy/jQuery.leanModal2/blob/master/LICENSE.md">MIT License</a> &nbsp;&middot;&nbsp; <a href="https://github.com/eustasy/jQuery.leanModal2">GitHub</a> &nbsp;&middot;&nbsp; <a href="https://github.com/eustasy/jQuery.leanModal2/releases">Releases</a></p>
114119
</footer>
115120

116-
<div id="defaults-example" class="background-white color-2 display-none js-leanmodal-modal rounded">
121+
<div id="defaults-example" class="background-flatui-clouds color-flatui-midnight-blue display-none js-leanmodal-modal rounded">
117122
<h3>Hello!</h3>
118123
<p>This is a modal using our defaults.</p>
119124
<a class="clickable color-flatui-pomegranate js-leanmodal-close no-decoration">Close</a>
120125
</div>
121126

122127
<script>$('.leanmodal-defaults').leanModal();</script>
123128

124-
<div id="modified-example" class="background-white color-2 display-none js-leanmodal-modal rounded">
129+
<div id="modified-example" class="background-flatui-clouds color-flatui-midnight-blue display-none js-leanmodal-modal rounded">
125130
<h3>Hello!</h3>
126131
<p>This is a modal using all the options.</p>
127132
<a class="clickable color-flatui-pomegranate close-it no-decoration">Close</a>
@@ -140,15 +145,5 @@ <h3>Hello!</h3>
140145
<script>$(function(){autosize($('textarea'));});</script>
141146
<script>$('textarea').one('click',function(){$(this).select();});</script>
142147
<script>$('textarea').dblclick(function(){$(this).select();});</script>
143-
<script>
144-
$(function() {
145-
equalize();
146-
downBoy('footer');
147-
window.onresize = function() {
148-
equalize();
149-
downBoy('footer');
150-
};
151-
});
152-
</script>
153148

154149
</html>

‎jQuery.leanModal2.js‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
$('<style>')
3434
.prop('type', 'text/css')
3535
.prop('id', 'js-leanmodal-styles')
36-
.html('\
36+
.text('\
3737
@keyframes smoothFadeOut {\
3838
from { opacity: 1; }\
3939
to { opacity: 0; }\
@@ -44,7 +44,7 @@
4444
}\
4545
#js-leanmodal-overlay {\
4646
align-items: center;\
47-
background: rgba(0, 0, 0, ' + options.overlayOpacity + ');\
47+
background: rgba(0, 0, 0, ' + parseFloat(options.overlayOpacity) + ');\
4848
display: none;\
4949
height: 100%;\
5050
justify-content: center;\
@@ -57,10 +57,10 @@
5757
cursor: pointer;\
5858
}\
5959
.js-leanmodal-inactive {\
60-
animation: smoothFadeOut ' + options.fadeTime + 'ms ease-in-out both;\
60+
animation: smoothFadeOut ' + parseInt(options.fadeTime, 10) + 'ms ease-in-out both;\
6161
}\
6262
.js-leanmodal-active {\
63-
animation: smoothFadeIn ' + options.fadeTime + 'ms ease-in-out both;\
63+
animation: smoothFadeIn ' + parseInt(options.fadeTime, 10) + 'ms ease-in-out both;\
6464
display: block;\
6565
z-index: 1000\
6666
}\
@@ -86,10 +86,10 @@
8686
// FUNCTION: Fade out the overlay and a passed identifier.
8787
function leanModal_Close(modal_id) {
8888
$('#js-leanmodal-overlay').removeClass('js-leanmodal-active').addClass('js-leanmodal-inactive')
89-
$.find(modal_id).removeClass('js-leanmodal-active').addClass('js-leanmodal-inactive')
89+
$(modal_id).removeClass('js-leanmodal-active').addClass('js-leanmodal-inactive')
9090
$('#js-leanmodal-overlay').unbind('click')
9191
$(document).off('keyup')
92-
$.find(modal_id).appendTo('body')
92+
$(modal_id).appendTo('body')
9393
}
9494

9595
//// Everything is Linked
@@ -158,14 +158,13 @@
158158
//// Modal Positioning
159159
// Position the modal centrally inside the overlay using flexbox.
160160
if ( options.modalCenter ) {
161-
$.find(modal_id).appendTo('#js-leanmodal-overlay')
162-
}
163-
164-
//// Curtain Up
165-
// Fade in the modal and overlay.
166-
$('#js-leanmodal-overlay').removeClass('js-leanmodal-inactive').addClass('js-leanmodal-active')
167-
$.find(modal_id).removeClass('js-leanmodal-inactive').addClass('js-leanmodal-active')
161+
$(modal_id).appendTo('#js-leanmodal-overlay')
162+
}
168163

164+
//// Curtain Up
165+
// Fade in the modal and overlay.
166+
$('#js-leanmodal-overlay').removeClass('js-leanmodal-inactive').addClass('js-leanmodal-active')
167+
$(modal_id).removeClass('js-leanmodal-inactive').addClass('js-leanmodal-active')
169168
//// Default Prevention
170169
// Prevent whatever the default was (probably scrolling).
171170
e.preventDefault()

‎jQuery.leanModal2.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)