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

Commit 3c0c50e

Browse files
i-like-robotsi-like-robots
committed
Support for maximum width and height properties. Window fades in on first run. Update method used if content is defined for open method. Full documentation for options and API.
1 parent ee476d9 commit 3c0c50e

File tree

5 files changed

+216
-51
lines changed

5 files changed

+216
-51
lines changed

‎README.markdown

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ https://github.com/i-like-robots/jQuery-Modal/issues
2121

2222
## Versioning
2323

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

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

‎css/example.css

Lines changed: 61 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
/**
22
* Author: Matt Hinchliffe <www.maketea.co.uk>
3-
* Modified: 13/04/2012
3+
* Modified: 16/04/2012
44
* Description: Some crummy styles to lay out the example file
55
*/
66

7+
/* Elements */
78
html, body {
89
height:100%;
910
margin:0;
@@ -16,15 +17,34 @@ html, body {
1617
background:#eee;
1718
}
1819

19-
h1 {
20-
font-size:2em;
21-
margin:0 0 .5em;
20+
h1, h2, h3, h4 {
21+
font-weight:normal;
22+
text-align:center;
23+
color:#555;
2224
}
25+
h1 {
26+
font-size:2em;
27+
margin:0 0 .5em;
2328

24-
p {
29+
}
30+
h2, h3, h4 {
31+
font-size:1.5em;
32+
margin:0 0 1em;
33+
}
34+
35+
p, dd {
2536
margin:0 0 1.5em;
2637
}
2738

39+
dt {
40+
font-weight:bold;
41+
}
42+
43+
dd {
44+
font-size:0.8125em;
45+
color:#555;
46+
}
47+
2848
button {
2949
font-size:1.5em;
3050
line-height:1;
@@ -39,12 +59,44 @@ button {
3959
background-color:#111;
4060
}
4161

42-
#introduction {
43-
width:25em;
62+
pre, code, var {
63+
font:normal 1em/1 Consolas, "Lucida Console", Monaco, monospace;
64+
}
65+
pre {
66+
overflow:auto;
67+
padding:1em .5em;
68+
border:1px solid #e4e4ee;
69+
text-align:left;
70+
background:#f4f4f4;
71+
border-radius:5px;
72+
}
73+
.comment {
74+
color:#999;
75+
}
76+
var {
77+
text-decoration:underline;
78+
}
79+
80+
hr {
81+
height:1px;
82+
padding:0;
83+
margin:0 0 1.5em;
84+
border:0;
85+
background:#ccc;
86+
}
87+
88+
#container {
89+
width:28em;
4490
margin:0 auto;
45-
padding:5em 0 2em;
46-
text-align:center;
91+
padding:3em 1em 2em;
92+
background:#fff;
93+
-webkit-box-shadow:0 0 5em rgba(0, 0, 0, 0.1);
94+
-moz-box-shadow:0 0 5em rgba(0, 0, 0, 0.1);
95+
box-shadow:0 0 5em rgba(0, 0, 0, 0.1);
4796
}
97+
.examples {
98+
text-align:center;
99+
}
48100

49101
#example {
50102
display:none;

‎css/modal.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* Author: Matt Hinchliffe <www.maketea.co.uk>
3-
* Modified: 10/04/2012
3+
* Modified: 16/04/2012
44
* Description: Simple jQuery modal window
55
* Example:
66
* <div id="modal-wrapper">

‎index.html

Lines changed: 120 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,123 @@
1919
</head>
2020
<body>
2121

22-
<div id="introduction">
23-
<h1>jQuery Modal</h1>
24-
<p class="intro">
25-
Every front-end developer needs their own <a href="http://github.com/i-like-robots/jQuery-Modal">modal
26-
window</a>. The plugin is optimised and customisable with a neat feature: it supports multiple, nestable
27-
instances.
28-
</p>
29-
<h2>Example</h2>
30-
<p>
31-
<button class="js-open" rel="example">Open the modal</button>
32-
</p>
22+
<div id="container">
23+
24+
<section class="introduction">
25+
<h1>jQuery Modal</h1>
26+
<p>
27+
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+
</p>
30+
</section>
31+
32+
<hr />
33+
34+
<section class="examples">
35+
<h2>Example</h2>
36+
<p>
37+
<button class="js-open" rel="example">Open the modal</button>
38+
</p>
39+
<pre><code><span class="comment">// Create an instance</span>
40+
var m = $('body').modal(opts).data('modal');
41+
42+
<span class="comment">// Do whatever</span>
43+
$.ajax({
44+
success: function(data)
45+
{
46+
m.open(data, callback);
47+
}
48+
});</code></pre>
49+
</section>
50+
51+
<hr />
52+
53+
<section class="options">
54+
<h3>Options</h3>
55+
<dl>
56+
<dt>onopen</dt>
57+
<dd>
58+
Callback function to execute after modal window has opened. Default: <code>undefined</code>.
59+
</dd>
60+
<dt>onclose</dt>
61+
<dd>
62+
Callback function to execute after modal window has closed. Default: <code>undefined</code>.
63+
</dd>
64+
<dt>onupdate</dt>
65+
<dd>
66+
Callback function to execute when modal window content is changed. Default: <code>undefined</code>.
67+
</dd>
68+
<dt>width</dt>
69+
<dd>
70+
Predefined width for modal window. Set to <code>auto</code> for the contents automatic flow width.
71+
Default: <code>640</code>.
72+
</dd>
73+
<dt>maxWidth</dt>
74+
<dd>
75+
Set CSS <code>max-width</code> relative to the modal windows parent. Set to <code>none</code> to
76+
set no maximum width. Default: <code>95%'</code>.
77+
</dd>
78+
<dt>height</dt>
79+
<dd>
80+
Predefined height for modal window. Set to <code>auto</code> for the contents automatic flow height.
81+
Default: <code>480</code>.
82+
</dd>
83+
<dt>maxHeight</dt>
84+
<dd>
85+
Set CSS <code>max-height</code> relative to the modal windows parent. Set to <code>none</code> to
86+
set no maximum height. Default: <code>95%'</code>.
87+
</dd>
88+
<dt>fixed</dt>
89+
<dd>
90+
Use CSS <code>fixed</code> positioning for the modal window instead of <code>absolute</code>.
91+
Default: <code>false</code>.
92+
</dd>
93+
<dt>overlay</dt>
94+
<dd>
95+
Create an overlay beneath the modal window and over the target. Default: <code>true</code>.
96+
</dd>
97+
<dt>blur</dt>
98+
<dd>
99+
Close the modal window when overlay is clicked. Default: <code>true</code>.
100+
</dd>
101+
</dl>
102+
</section>
103+
104+
<hr />
105+
106+
<section class="api">
107+
<h4>Public methods</h4>
108+
<dl>
109+
<dt>.open([content][, callback])</dt>
110+
<dd>
111+
Opens the modal window. <var>Content</var> Passed to the <code>.update()</code> method.
112+
<var>Callback</var> A function to call once the window has opened.
113+
</dd>
114+
<dt>.close([callback])</dt>
115+
<dd>
116+
Closes the modal window. <var>Callback</var> A function to call once the window has
117+
closed.
118+
</dd>
119+
<dt>.update(content[, callback])</dt>
120+
<dd>
121+
Updates the contents of the modal window. <var>Content</var> Set the content of the modal window
122+
via jQuery's <a href="http://api.jquery.com/html/#html2">.html()</a> method. <var>Callback</var> A
123+
function to call once the window has been updated. The <code>.align()</code> method will be called
124+
if the window is open.
125+
</dd>
126+
<dt>.align()</dt>
127+
<dd>
128+
Repositions the window to the current viewport.
129+
</dd>
130+
<dt>Callbacks:</dt>
131+
<dd>
132+
All callbacks will be called from the scope of the modal instance, so that <code>this</code> will
133+
refer to the modal instance. Callbacks provided as arguments to the public methods will be executed
134+
in addition to those specified in the options.
135+
</dd>
136+
</dl>
137+
</section>
138+
33139
</div>
34140

35141
<p id="example">
@@ -44,13 +150,13 @@ <h2>Example</h2>
44150
<script>
45151
$(function()
46152
{
47-
// Create a modal instance
48-
window.modal = $('body').modal().data('modal');
153+
// Create a modal instance. Use the document body as target to create a modal window for the entire document.
154+
window.m = $('body').modal().data('modal');
49155

50156
// Bind click event
51157
$(document).on('click', '.js-open', function()
52158
{
53-
modal.open( document.getElementById( this.getAttribute('rel') ).innerHTML );
159+
m.open( document.getElementById( this.getAttribute('rel') ).innerHTML );
54160
});
55161
});
56162
</script>

‎js/modal.js

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/**
22
* @name Simple modal
33
* @author Matt Hinchliffe
4-
* @modified 15/04/2012
5-
* @version 0.7.0
4+
* @modified 16/04/2012
5+
* @version 0.7.1
66
* @requires jQuery 1.7+
77
* @description A simple modal overlay
88
*
@@ -33,14 +33,16 @@
3333
function Modal(target, options)
3434
{
3535
this.opts = $.extend({}, {
36-
onopen: undefined,
37-
onclose: undefined,
38-
onupdate: undefined,
39-
width: 640,
40-
height: 480,
41-
fixed: false,
42-
overlay: true,
43-
blur: true
36+
onopen: undefined,
37+
onclose: undefined,
38+
onupdate: undefined,
39+
width: 640,
40+
maxWidth: '95%',
41+
height: 480,
42+
maxHeight: '95%',
43+
fixed: false,
44+
overlay: true,
45+
blur: true
4446
}, options);
4547
this.target = target;
4648

@@ -71,7 +73,10 @@
7173
this.wrapper = $('<div class="modal-wrapper"><span class="modal-close" data-toggle="modal">Close</span></div>').css({
7274
position: this.opts.fixed ? 'fixed' : 'absolute',
7375
width: this.opts.width,
74-
height: this.opts.height
76+
maxWidth: this.opts.maxWidth,
77+
height: this.opts.height,
78+
maxHeight: this.opts.maxHeight,
79+
display: 'none'
7580
});
7681
this.content = $('<div class="modal-content" />').appendTo( this.wrapper );
7782
this.wrapper.appendTo( this.target );
@@ -84,7 +89,8 @@
8489
position: 'absolute',
8590
top: 0,
8691
left: 0,
87-
width: '100%'
92+
width: '100%',
93+
display: 'none'
8894
})
8995
.appendTo( this.target );
9096
}
@@ -155,19 +161,20 @@
155161
self.close();
156162
});
157163

158-
// Add content to window
159-
this.content.html(content);
160-
161164
// Fade in
162165
this.wrapper
163166
.add( this.overlay )
164167
.stop()
165168
.fadeIn();
166169

167-
// Move into position
168-
this.align();
169170
this.isOpen = true;
170171

172+
// Add content to window
173+
if (content)
174+
{
175+
this.update(content);
176+
}
177+
171178
// Callbacks
172179
if (this.opts.onopen)
173180
{
@@ -193,16 +200,16 @@
193200
if (this.isOpen)
194201
{
195202
this.align();
203+
}
196204

197-
// Callbacks
198-
if (this.opts.onupdate)
199-
{
200-
this.opts.onupdate.call(this);
201-
}
202-
if (callback)
203-
{
204-
callback.call(this);
205-
}
205+
// Callbacks
206+
if (this.opts.onupdate)
207+
{
208+
this.opts.onupdate.call(this);
209+
}
210+
if (callback)
211+
{
212+
callback.call(this);
206213
}
207214
},
208215

0 commit comments

Comments
 (0)