Skip to content
This repository was archived by the owner on Mar 20, 2018. It is now read-only.

Commit a0a19be

Browse files
i-like-robotsi-like-robots
committed
Added .resize() method and improved examples and documentation. v0.9.0
1 parent 68a8de0 commit a0a19be

File tree

6 files changed

+197
-72
lines changed

6 files changed

+197
-72
lines changed

‎README.markdown

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# jQuery Modal
2-
[jQuery Modal][1] is a performant and flexible [jQuery][2] modal window plugin. The plugin is optimised and customisable and even supports multiple, nestable instances. Less than 3KB minified and 1KB with gzip compression.
2+
Every front-end developer needs their own [modal window][1]. The plugin is performant, customisable and easy to integrate. Less than 3KB minified and 1KB with gzip compression.
33

44
## Dependencies
55

@@ -21,7 +21,7 @@ https://github.com/i-like-robots/jQuery-Modal/issues
2121

2222
## Versioning
2323

24-
The current version is `0.8.1`. Releases will be numbered in following format:
24+
The current version is `0.9.0`. Releases will be numbered in following format:
2525

2626
`<major>.<minor>.<patch>`
2727

‎css/example.css

+22-23
Original file line numberDiff line numberDiff line change
@@ -26,24 +26,27 @@ h1, h2, h3, h4 {
2626
font-size:2.5em;
2727
letter-spacing:-.075em;
2828
}
29-
h2, h3, h4 {
30-
margin:0 0 1em;
29+
h2 {
30+
margin:0 0 .5em;
3131
font-weight:normal;
3232
font-size:1.5em;
3333
}
34+
h3, h4 {
35+
margin:0 0 .5em;
36+
font-size:1em;
37+
}
3438

35-
p, dd {
39+
p, dl {
3640
margin:0 0 1.5em;
3741
}
38-
39-
dt {
40-
font-weight:bold;
41-
}
42-
43-
dd {
44-
font-size:0.8125em;
45-
color:#555;
46-
}
42+
dt {
43+
font-weight:bold;
44+
}
45+
dd {
46+
margin:0 0 1em;
47+
font-size:0.8125em;
48+
color:#555;
49+
}
4750

4851
button {
4952
font-size:1.5em;
@@ -59,20 +62,20 @@ button {
5962
background-color:#111;
6063
}
6164

65+
figure {
66+
margin:0;
67+
}
68+
6269
pre, code, var {
6370
font:normal 1em/1 Consolas, "Lucida Console", Monaco, monospace;
6471
}
6572
pre {
6673
overflow:auto;
6774
padding:1em .5em;
68-
border:1px solid #e4e4ee;
75+
border:1px solid #333;
6976
text-align:left;
70-
background:#f4f4f4;
7177
border-radius:5px;
7278
}
73-
.comment {
74-
color:#999;
75-
}
7679
var {
7780
text-decoration:underline;
7881
}
@@ -94,10 +97,6 @@ hr {
9497
-moz-box-shadow:0 0 5em rgba(0, 0, 0, 0.1);
9598
box-shadow:0 0 5em rgba(0, 0, 0, 0.1);
9699
}
97-
.examples {
100+
#example {
98101
text-align:center;
99-
}
100-
101-
#example {
102-
display:none;
103-
}
102+
}

‎css/pygments.css

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
.syntax .hll { background-color: #49483e }
2+
.syntax { background: #272822; color: #f8f8f2 }
3+
.syntax .c { color: #75715e } /* Comment */
4+
.syntax .err { color: #960050; background-color: #1e0010 } /* Error */
5+
.syntax .k { color: #66d9ef } /* Keyword */
6+
.syntax .l { color: #ae81ff } /* Literal */
7+
.syntax .n { color: #f8f8f2 } /* Name */
8+
.syntax .o { color: #f92672 } /* Operator */
9+
.syntax .p { color: #f8f8f2 } /* Punctuation */
10+
.syntax .cm { color: #75715e } /* Comment.Multiline */
11+
.syntax .cp { color: #75715e } /* Comment.Preproc */
12+
.syntax .c1 { color: #75715e } /* Comment.Single */
13+
.syntax .cs { color: #75715e } /* Comment.Special */
14+
.syntax .ge { font-style: italic } /* Generic.Emph */
15+
.syntax .gs { font-weight: bold } /* Generic.Strong */
16+
.syntax .kc { color: #66d9ef } /* Keyword.Constant */
17+
.syntax .kd { color: #66d9ef } /* Keyword.Declaration */
18+
.syntax .kn { color: #f92672 } /* Keyword.Namespace */
19+
.syntax .kp { color: #66d9ef } /* Keyword.Pseudo */
20+
.syntax .kr { color: #66d9ef } /* Keyword.Reserved */
21+
.syntax .kt { color: #66d9ef } /* Keyword.Type */
22+
.syntax .ld { color: #e6db74 } /* Literal.Date */
23+
.syntax .m { color: #ae81ff } /* Literal.Number */
24+
.syntax .s { color: #e6db74 } /* Literal.String */
25+
.syntax .na { color: #a6e22e } /* Name.Attribute */
26+
.syntax .nb { color: #f8f8f2 } /* Name.Builtin */
27+
.syntax .nc { color: #a6e22e } /* Name.Class */
28+
.syntax .no { color: #66d9ef } /* Name.Constant */
29+
.syntax .nd { color: #a6e22e } /* Name.Decorator */
30+
.syntax .ni { color: #f8f8f2 } /* Name.Entity */
31+
.syntax .ne { color: #a6e22e } /* Name.Exception */
32+
.syntax .nf { color: #a6e22e } /* Name.Function */
33+
.syntax .nl { color: #f8f8f2 } /* Name.Label */
34+
.syntax .nn { color: #f8f8f2 } /* Name.Namespace */
35+
.syntax .nx { color: #a6e22e } /* Name.Other */
36+
.syntax .py { color: #f8f8f2 } /* Name.Property */
37+
.syntax .nt { color: #f92672 } /* Name.Tag */
38+
.syntax .nv { color: #f8f8f2 } /* Name.Variable */
39+
.syntax .ow { color: #f92672 } /* Operator.Word */
40+
.syntax .w { color: #f8f8f2 } /* Text.Whitespace */
41+
.syntax .mf { color: #ae81ff } /* Literal.Number.Float */
42+
.syntax .mh { color: #ae81ff } /* Literal.Number.Hex */
43+
.syntax .mi { color: #ae81ff } /* Literal.Number.Integer */
44+
.syntax .mo { color: #ae81ff } /* Literal.Number.Oct */
45+
.syntax .sb { color: #e6db74 } /* Literal.String.Backtick */
46+
.syntax .sc { color: #e6db74 } /* Literal.String.Char */
47+
.syntax .sd { color: #e6db74 } /* Literal.String.Doc */
48+
.syntax .s2 { color: #e6db74 } /* Literal.String.Double */
49+
.syntax .se { color: #ae81ff } /* Literal.String.Escape */
50+
.syntax .sh { color: #e6db74 } /* Literal.String.Heredoc */
51+
.syntax .si { color: #e6db74 } /* Literal.String.Interpol */
52+
.syntax .sx { color: #e6db74 } /* Literal.String.Other */
53+
.syntax .sr { color: #e6db74 } /* Literal.String.Regex */
54+
.syntax .s1 { color: #e6db74 } /* Literal.String.Single */
55+
.syntax .ss { color: #e6db74 } /* Literal.String.Symbol */
56+
.syntax .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
57+
.syntax .vc { color: #f8f8f2 } /* Name.Variable.Class */
58+
.syntax .vg { color: #f8f8f2 } /* Name.Variable.Global */
59+
.syntax .vi { color: #f8f8f2 } /* Name.Variable.Instance */
60+
.syntax .il { color: #ae81ff } /* Literal.Number.Integer.Long */

‎index.html

+94-37
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010

1111
<link rel="stylesheet" href="css/example.css" />
12+
<link rel="stylesheet" href="css/pygments.css" />
1213
<link rel="stylesheet" href="css/modal.css" />
1314

1415
<!--
@@ -21,38 +22,91 @@
2122

2223
<div id="container">
2324

24-
<section class="introduction">
25+
<section id="introduction">
2526
<h1>jQuery Modal</h1>
2627
<p>
2728
Every front-end developer needs their own <a href="http://github.com/i-like-robots/jQuery-Modal">modal
28-
window</a>. The plugin is optimised and customisable and even supports multiple, nestable instances.
29-
Less than 3KB minified and 1KB with gzip compression.
29+
window</a>. The plugin is performant, customisable and easy to integrate. Less than 3KB minified and
30+
1KB with gzip compression.
3031
</p>
32+
33+
<div id="example">
34+
<p>
35+
<button class="js-open">See an example</button>
36+
</p>
37+
<p id="example-content" style="display:none;">
38+
Rump sausage ham short loin pork. Pig venison boudin bresaola, frankfurter sirloin filet mignon pork shankle
39+
capicola. Leberkas jerky ground round short loin bacon. Capicola strip steak flank meatball pork loin beef
40+
ribs turducken, biltong jowl kielbasa rump shank short ribs. Beef beef ribs filet mignon frankfurter,
41+
prosciutto pork chop chicken ground round short ribs tenderloin sirloin fatback brisket.
42+
</p>
43+
</div>
3144
</section>
3245

3346
<hr />
3447

35-
<section class="examples">
36-
<h2>Example</h2>
48+
<section id="setup">
49+
<h2>Setup</h2>
50+
<p>
51+
This isn't a copy and paste plugin, it's just an outline. The plugin is instantiated in the usual
52+
manner and an instances API can be accessed via element data.
53+
</p>
54+
55+
<figure>
56+
<pre class="syntax"><span class="c1">// Create a modal instance.</span>
57+
<span class="kd">var</span> <span class="nx">$m</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'body'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(),</span>
58+
59+
<span class="c1">// Access an instance API</span>
60+
<span class="nx">api</span> <span class="o">=</span> <span class="nx">$m</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s1">'modal'</span><span class="p">);</span>
61+
</pre>
62+
</figure>
63+
64+
<p>
65+
The simplest example is to open a modal window instance with basic HTML content:
66+
</p>
67+
68+
<figure>
69+
<pre class="syntax"><span class="c1">// Open the modal with some content</span>
70+
<span class="nx">api</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="s2">"&lt;p&gt;Hello, is it me you're looking for?"</span><span class="p">);</span>
71+
</pre>
72+
</figure>
73+
3774
<p>
38-
<button class="js-open" rel="example">Open the modal</button>
75+
The API is flexible enough to do any common task such as confirmation boxes, displaying images and
76+
external content.
3977
</p>
40-
<pre><code><span class="comment">// Create an instance</span>
41-
var m = $('body').modal(opts).data('modal');
42-
43-
<span class="comment">// Do whatever</span>
44-
$.ajax({
45-
success: function(data)
46-
{
47-
m.open(data);
48-
}
49-
});</code></pre>
78+
79+
<figure>
80+
<pre class="syntax"><span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
81+
<span class="nx">url</span><span class="o">:</span> <span class="s1">'http://localhost/api?foo=bar'</span><span class="p">,</span>
82+
<span class="nx">success</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span>
83+
<span class="p">{</span>
84+
<span class="k">if</span> <span class="p">(</span><span class="nx">api</span><span class="p">.</span><span class="nx">isOpen</span><span class="p">)</span>
85+
<span class="p">{</span>
86+
<span class="nx">api</span><span class="p">.</span><span class="nx">update</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
87+
<span class="p">}</span>
88+
<span class="k">else</span>
89+
<span class="p">{</span>
90+
<span class="nx">api</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
91+
<span class="p">}</span>
92+
<span class="p">},</span>
93+
<span class="nx">error</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">xhr</span><span class="p">,</span> <span class="nx">error</span><span class="p">)</span>
94+
<span class="p">{</span>
95+
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">error</span><span class="p">);</span>
96+
<span class="p">}</span>
97+
<span class="p">});</span>
98+
</pre>
99+
</figure>
100+
50101
</section>
51102

52103
<hr />
53104

54-
<section class="options">
55-
<h3>Options</h3>
105+
<section id="options">
106+
<h2>Options</h2>
107+
<p>
108+
Global options can be specified via the standard jQuery plugin interface.
109+
</p>
56110
<dl>
57111
<dt>onopen</dt>
58112
<dd>
@@ -74,7 +128,7 @@ <h3>Options</h3>
74128
<dt>maxWidth</dt>
75129
<dd>
76130
Set CSS <code>max-width</code> relative to the modal windows parent. Set to <code>none</code> to
77-
set no maximum width. Default: <code>95%'</code>.
131+
set no maximum width. Default: <code>'95%'</code>.
78132
</dd>
79133
<dt>height</dt>
80134
<dd>
@@ -84,7 +138,7 @@ <h3>Options</h3>
84138
<dt>maxHeight</dt>
85139
<dd>
86140
Set CSS <code>max-height</code> relative to the modal windows parent. Set to <code>none</code> to
87-
set no maximum height. Default: <code>95%'</code>.
141+
set no maximum height. Default: <code>'95%'</code>.
88142
</dd>
89143
<dt>fixed</dt>
90144
<dd>
@@ -108,8 +162,8 @@ <h3>Options</h3>
108162

109163
<hr />
110164

111-
<section class="api">
112-
<h4>Public methods</h4>
165+
<section id="api">
166+
<h2>Public methods</h2>
113167
<dl>
114168
<dt>.open([content][, callback])</dt>
115169
<dd>
@@ -132,41 +186,44 @@ <h4>Public methods</h4>
132186
<dd>
133187
Repositions the window to the center of the modal window parent.
134188
</dd>
189+
<dt>.resize(width, height)</dt>
190+
<dd>
191+
Resizes the modal window content area. <var>Width</var> and <var>Height</var> can be any unit
192+
compatible with the <a href="http://api.jquery.com/category/dimensions/">jQuery Dimensions</a> API.
193+
</dd>
135194
<dt>A note on callbacks:</dt>
136195
<dd>
137196
All callbacks will be called from the scope of the modal instance, so that <code>this</code> will
138-
refer to the modal instance. Callbacks provided as arguments to the public methods will be executed
139-
in addition to those specified as options.
197+
refer to the modal instance. Callbacks provided as arguments to the public methods above will be
198+
executed in addition to those specified as instance options.
140199
</dd>
141200
</dl>
142201
</section>
143202

144203
</div>
145204

146-
<p id="example">
147-
Rump sausage ham short loin pork. Pig venison boudin bresaola, frankfurter sirloin filet mignon pork shankle
148-
capicola. Leberkas jerky ground round short loin bacon. Capicola strip steak flank meatball pork loin beef
149-
ribs turducken, biltong jowl kielbasa rump shank short ribs. Beef beef ribs filet mignon frankfurter,
150-
prosciutto pork chop chicken ground round short ribs tenderloin sirloin fatback brisket.
151-
</p>
152-
153-
<a href="https://github.com/i-like-robots/jQuery-Modal">
154-
<img style="position:absolute;top:0;right:0;border:0;" src="https://a248.e.akamai.net/assets.github.com/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" />
205+
<a href="http://github.com/i-like-robots/jQuery-Modal">
206+
<img style="position:absolute; top:0; right:0; border:0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" />
155207
</a>
156208

157-
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
209+
<script src="//code.jquery.com/jquery-1.7.2.min.js"></script>
158210
<script src="js/modal.js"></script>
159211
<script>
160212
$(function()
161213
{
162-
// Create a modal instance. Use the document body as target to create a modal window for the entire document.
163-
window.m = $('body').modal().data('modal');
214+
// Create a modal instance.
215+
var $m = $('body').modal(),
216+
217+
// Access an instance API
218+
api = $m.data('modal');
164219

165220
// Bind a click event to copy a hidden elements content into the modal window
166221
$(document).on('click', '.js-open', function()
167222
{
168-
m.open( document.getElementById( this.getAttribute('rel') ).innerHTML );
223+
api.open( document.getElementById('example-content').innerHTML );
169224
});
225+
226+
window.$m = $m;
170227
});
171228
</script>
172229

0 commit comments

Comments
 (0)