-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathquickModal.html
More file actions
162 lines (148 loc) · 8.25 KB
/
quickModal.html
File metadata and controls
162 lines (148 loc) · 8.25 KB
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <![endif]-->
<!--[if !IE]> <!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>QuickModal Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="demo.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="quickModal.css" rel="stylesheet" />
</head>
<body>
<!-- Info about the modal: uses demo.css -->
<header>
<h1>QuickModal: Lightweight Modal Dialog</h1>
</header>
<section id="main">
<article>
<h2>Demo</h2>
<a class="modalTrigger button" href="#modal-1">Demo the modal dialog</a>
<a class="modalTrigger button" href="#modal-2">Demo with no header</a>
<a class="modalTrigger button" href="#modal-3">Demo with body only</a>
<h2>General Info</h2>
<p>quickModal is a jQuery plug in that creates a modal dialog from a div on the page, using the trigger's href attribute to set which div to display.</p>
<h3>Features</h3>
<ul>
<li>Multiple instances on a single page</li>
<li>Customizable via plug in options and css.</li>
<li>Lightweight (1.8kb minimized)</li>
<li>Clicking out of the modal ara closes modal (i.e., close button optional)</li>
</ul>
<h2>How To Set Up & Use QuickModal</h2>
<ol>
<li>Add the plug-in script to the page, <em>after</em> you've added jQuery.
<pre class="code"><script src="/path-to-scripts/jquery.quickModal.min.js"
type="text/javascript"></script></pre>
</li>
<li>Add the modal's css to your css file, or to the page
<pre class="code"><link href="/path-to-styles/quickModal.css" rel="stylesheet" /></pre>
</li>
<li>Call the plug in, using your selector's id or class
<pre class="code">$('.modalTrigger').quickModal();</pre>
</li>
<li>Set any options you want to customize
<pre class="code">$('.modalTrigger').quickModal({
overlayColor: "navy",
borderRadius: "0",
modalWidth: "700"
});</pre>
</li>
<li>When the user clicks on your selector, the modal will quickly fade in. Clicking on the element with the closeButton class, or anywhere outside of the modal, will close the modal.</li>
</ol>
<h2>Notes</h2>
<ul>
<li>The page behind the modal will not scroll while the modal is open, and the modal doesn't scroll - known bug (Issue #2).</li>
<li>The term "overlay" refers to the partial opacity background behind the modal. (You've probably already worked that out, but just in case.)</li>
</ul>
</article>
<aside id="sidebar">
<h2>Options</h2>
<p>The plug in has lots of settings you can tweak.</p>
<table>
<thead>
<tr>
<th>Option</th>
<th>Default Value</th>
</tr>
</thead>
<tbody>
<tr><td>closeButton</td><td>".modal-close"</td></tr>
<tr><td>overlayOpacity</td><td>0.5</td></tr>
<tr><td>overlayColor</td><td>"#000"</td></tr>
<tr><td>overlayZIndex</td><td>100</td></tr>
<tr><td>modalZIndex</td><td>1000</td></tr>
<tr><td>modalWidth</td><td>"500"</td></tr>
<tr><td>boxShadow</td><td>"0px 0px 10px rgba(0,0,0,0.5)"</td></tr>
<tr><td>borderCss</td><td>"1px solid #444"</td></tr>
<tr><td>borderRadius</td><td>"4px"</td></tr>
<tr><td>modalBgColor</td><td>"#fff"</td></tr>
<tr><td>headerBgColor</td><td>"rgb(185, 185, 185)"</td></tr>
<tr><td>footerBgColor</td><td>"rgb(219, 219, 219)"</td></tr>
</tbody>
</table>
</aside>
</section>
<!-- Modal dialog: uses quickModal.css file -->
<div id="modal-1" class="modal">
<div class="modal-header">
<div class="content-header">
<h3 class="modal-title">SEND PAGE BY EMAIL</h3>
<a class="modal-close" href="#"><i class="fa fa-times"></i></a>
</div>
</div>
<div class="modal-body">
<div class="content-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum libero purus, convallis nec vestibulum eget, luctus vitae purus. Vestibulum non mauris et sem vulputate pellentesque ac a turpis. Ut vel lacus vitae justo vestibulum lobortis. Nunc ipsum ipsum, laoreet id dictum nec, fermentum vel purus. Maecenas nisl felis, faucibus non rutrum eu, sollicitudin sed ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent dignissim lacinia tempus. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Nulla accumsan pellentesque velit, a malesuada diam tristique a. Fusce eleifend magna erat, et imperdiet orci. Quisque sapien mauris, malesuada eu tristique pulvinar, placerat id ligula. Vivamus vitae viverra nulla. Donec eget turpis vel erat malesuada sodales.</p>
</div>
</div>
<div class="modal-footer">
<div class="content-footer">
<div style="float: left; width: auto;">
<button type="submit" class="button button-primary">
<i class="fa fa-bicycle"></i>Primary Button</button>
</div>
<div style="float: right; width:auto;">
<button type="reset" class="button modal-close"><i class="fa fa-times"></i>Cancel</button>
</div>
</div>
</div>
</div>
<div id="modal-2" class="modal">
<div class="modal-body">
<div class="content-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum libero purus, convallis nec vestibulum eget, luctus vitae purus. Vestibulum non mauris et sem vulputate pellentesque ac a turpis. Ut vel lacus vitae justo vestibulum lobortis. Nunc ipsum ipsum, laoreet id dictum nec, fermentum vel purus. Maecenas nisl felis, faucibus non rutrum eu, sollicitudin sed ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent dignissim lacinia tempus. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Nulla accumsan pellentesque velit, a malesuada diam tristique a. Fusce eleifend magna erat, et imperdiet orci. Quisque sapien mauris, malesuada eu tristique pulvinar, placerat id ligula. Vivamus vitae viverra nulla. Donec eget turpis vel erat malesuada sodales.</p>
</div>
</div>
<div class="modal-footer">
<div class="content-footer">
<div style="float: left; width: auto;">
<button type="submit" class="button button-primary">
<i class="fa fa-bicycle"></i>Primary Button</button>
</div>
<div style="float: right; width:auto;">
<button type="reset" class="button modal-close"><i class="fa fa-times"></i>Cancel</button>
</div>
</div>
</div>
</div>
<div id="modal-3" class="modal">
<div class="modal-body">
<div class="content-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum libero purus, convallis nec vestibulum eget, luctus vitae purus. Vestibulum non mauris et sem vulputate pellentesque ac a turpis. Ut vel lacus vitae justo vestibulum lobortis. Nunc ipsum ipsum, laoreet id dictum nec, fermentum vel purus. Maecenas nisl felis, faucibus non rutrum eu, sollicitudin sed ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent dignissim lacinia tempus. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Nulla accumsan pellentesque velit, a malesuada diam tristique a. Fusce eleifend magna erat, et imperdiet orci. Quisque sapien mauris, malesuada eu tristique pulvinar, placerat id ligula. Vivamus vitae viverra nulla. Donec eget turpis vel erat malesuada sodales.</p>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.quickModal.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('.modalTrigger').quickModal();
});
</script>
</body>
</html>