139 |
140 |
142 |
143 | ```
144 |
145 | The reason for doing this instead of just simply setting `overflow: hidden` when a modal is open is to avoid having the page shift as a result of the scrollbar appearing/disappearing. This also allows the document to be scrollable when there is a tall modal but only to the height of the modal, not the entire page.
146 |
147 | Constrain Modal to Window Size
148 | -----------
149 |
150 | You can bind the height of the modal body to the window with something like this:
151 | ```javascript
152 | $.fn.modal.defaults.maxHeight = function(){
153 | // subtract the height of the modal header and footer
154 | return $(window).height() - 165;
155 | }
156 | ```
157 |
158 | **Note:** This will be overwritten by the responsiveness and is only set when the modal is displayed, not when the window is resized.
159 |
160 | Tab Index for Modal Forms
161 | -----------
162 | You can use `data-tabindex` instead of the default `tabindex` to specify the tabindex within a modal.
163 | ```html
164 |
165 |
166 | ```
167 | See the stackable example on the [demo](http://jschr.github.com/bootstrap-modal/) page for an example.
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 | [](https://bitdeli.com/free "Bitdeli Badge")
177 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "bootstrap-modal",
3 | "description": "Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.",
4 | "version": "2.2.5",
5 | "main": ["js/bootstrap-modal.js", "js/bootstrap-modalmanager.js", "css/bootstrap-modal.css"],
6 | "dependencies": {
7 | "bootstrap": ">=2.3.0"
8 | },
9 | "url": "https://github.com/jschr/bootstrap-modal.git",
10 | "author": "Jordan Schroter",
11 | "license": {
12 | "type": "Apache License 2.0",
13 | "url": "https://github.com/jschr/bootstrap-modal/blob/master/LICENSE"
14 | }
15 |
16 | }
17 |
--------------------------------------------------------------------------------
/bs3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | ...
141 |
36 | Bootstrap-modal by jschr
7 |
8 |
9 |
10 |
15 |
16 |
17 |
32 |
33 |
34 |
37 |
53 |
54 |
131 |
132 |
133 |
167 |
168 |
182 |
183 |
201 |
202 |
219 |
220 |
235 |
236 |
245 |
246 |
259 |
260 |
275 |
276 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
331 |
332 |
333 |
355 |
356 |
384 |
387 |
388 |
389 |
--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jschr/bootstrap-modal",
3 | "description": "Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.",
4 | "keywords": ["bootstrap", "modal", "javascript"],
5 | "homepage": "https://github.com/jschr/bootstrap-modal.git",
6 | "license": "Apache License 2.0",
7 | "authors": [
8 | {
9 | "name": "Jordan Schroter",
10 | "homepage": "https://twitter.com/_jschr",
11 | "role": "Developer"
12 | }
13 | ]
14 | }
--------------------------------------------------------------------------------
/css/bootstrap-modal-bs3patch.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap Modal
3 | *
4 | * Copyright Jordan Schroter
5 | * Licensed under the Apache License v2.0
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 | *
8 | * Boostrap 3 patch for for bootstrap-modal. Include BEFORE bootstrap-modal.css!
9 | */
10 |
11 | body.modal-open,
12 | .modal-open .navbar-fixed-top,
13 | .modal-open .navbar-fixed-bottom {
14 | margin-right: 0;
15 | }
16 |
17 | .modal {
18 | left: 50%;
19 | bottom: auto;
20 | right: auto;
21 | z-index: 1050;
22 | padding: 0;
23 | width: 500px;
24 | margin-left: -250px;
25 | background-color: #ffffff;
26 | border: 1px solid #999999;
27 | border: 1px solid rgba(0, 0, 0, 0.2);
28 | border-radius: 6px;
29 | -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
30 | box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
31 | background-clip: padding-box;
32 | }
33 |
34 | .modal.container {
35 | max-width: none;
36 | }
37 |
38 | .modal-backdrop {
39 | position: fixed;
40 | top: 0;
41 | right: 0;
42 | bottom: 0;
43 | left: 0;
44 | z-index: 1040;
45 | }
--------------------------------------------------------------------------------
/css/bootstrap-modal.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap Modal
3 | *
4 | * Copyright Jordan Schroter
5 | * Licensed under the Apache License v2.0
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 | *
8 | */
9 |
10 | .modal-open {
11 | overflow: hidden;
12 | }
13 |
14 |
15 | /* add a scroll bar to stop page from jerking around */
16 | .modal-open.page-overflow .page-container,
17 | .modal-open.page-overflow .page-container .navbar-fixed-top,
18 | .modal-open.page-overflow .page-container .navbar-fixed-bottom,
19 | .modal-open.page-overflow .modal-scrollable {
20 | overflow-y: scroll;
21 | }
22 |
23 | @media (max-width: 979px) {
24 | .modal-open.page-overflow .page-container .navbar-fixed-top,
25 | .modal-open.page-overflow .page-container .navbar-fixed-bottom {
26 | overflow-y: visible;
27 | }
28 | }
29 |
30 |
31 | .modal-scrollable {
32 | position: fixed;
33 | top: 0;
34 | bottom: 0;
35 | left: 0;
36 | right: 0;
37 | overflow: auto;
38 | }
39 |
40 | .modal {
41 | outline: none;
42 | position: absolute;
43 | margin-top: 0;
44 | top: 50%;
45 | overflow: visible; /* allow content to popup out (i.e tooltips) */
46 | }
47 |
48 | .modal.fade {
49 | top: -100%;
50 | -webkit-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
51 | -moz-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
52 | -o-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
53 | transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
54 | }
55 |
56 | .modal.fade.in {
57 | top: 50%;
58 | }
59 |
60 | .modal-body {
61 | max-height: none;
62 | overflow: visible;
63 | }
64 |
65 | .modal.modal-absolute {
66 | position: absolute;
67 | z-index: 950;
68 | }
69 |
70 | .modal .loading-mask {
71 | position: absolute;
72 | top: 0;
73 | bottom: 0;
74 | left: 0;
75 | right: 0;
76 | background: #fff;
77 | border-radius: 6px;
78 | }
79 |
80 | .modal-backdrop.modal-absolute{
81 | position: absolute;
82 | z-index: 940;
83 | }
84 |
85 | .modal-backdrop,
86 | .modal-backdrop.fade.in{
87 | opacity: 0.7;
88 | filter: alpha(opacity=70);
89 | background: #fff;
90 | }
91 |
92 | .modal.container {
93 | width: 940px;
94 | margin-left: -470px;
95 | }
96 |
97 | /* Modal Overflow */
98 |
99 | .modal-overflow.modal {
100 | top: 1%;
101 | }
102 |
103 | .modal-overflow.modal.fade {
104 | top: -100%;
105 | }
106 |
107 | .modal-overflow.modal.fade.in {
108 | top: 1%;
109 | }
110 |
111 | .modal-overflow .modal-body {
112 | overflow: auto;
113 | -webkit-overflow-scrolling: touch;
114 | }
115 |
116 | /* Responsive */
117 |
118 | @media (min-width: 1200px) {
119 | .modal.container {
120 | width: 1170px;
121 | margin-left: -585px;
122 | }
123 | }
124 |
125 | @media (max-width: 979px) {
126 | .modal,
127 | .modal.container,
128 | .modal.modal-overflow {
129 | top: 1%;
130 | right: 1%;
131 | left: 1%;
132 | bottom: auto;
133 | width: auto !important;
134 | height: auto !important;
135 | margin: 0 !important;
136 | padding: 0 !important;
137 | }
138 |
139 | .modal.fade.in,
140 | .modal.container.fade.in,
141 | .modal.modal-overflow.fade.in {
142 | top: 1%;
143 | bottom: auto;
144 | }
145 |
146 | .modal-body,
147 | .modal-overflow .modal-body {
148 | position: static;
149 | margin: 0;
150 | height: auto !important;
151 | max-height: none !important;
152 | overflow: visible !important;
153 | }
154 |
155 | .modal-footer,
156 | .modal-overflow .modal-footer {
157 | position: static;
158 | }
159 | }
160 |
161 | .loading-spinner {
162 | position: absolute;
163 | top: 50%;
164 | left: 50%;
165 | margin: -12px 0 0 -12px;
166 | }
167 |
168 | /*
169 | Animate.css - http://daneden.me/animate
170 | Licensed under the ☺ license (http://licence.visualidiot.com/)
171 |
172 | Copyright (c) 2012 Dan Eden*/
173 |
174 | .animated {
175 | -webkit-animation-duration: 1s;
176 | -moz-animation-duration: 1s;
177 | -o-animation-duration: 1s;
178 | animation-duration: 1s;
179 | -webkit-animation-fill-mode: both;
180 | -moz-animation-fill-mode: both;
181 | -o-animation-fill-mode: both;
182 | animation-fill-mode: both;
183 | }
184 |
185 | @-webkit-keyframes shake {
186 | 0%, 100% {-webkit-transform: translateX(0);}
187 | 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
188 | 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
189 | }
190 |
191 | @-moz-keyframes shake {
192 | 0%, 100% {-moz-transform: translateX(0);}
193 | 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
194 | 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
195 | }
196 |
197 | @-o-keyframes shake {
198 | 0%, 100% {-o-transform: translateX(0);}
199 | 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
200 | 20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
201 | }
202 |
203 | @keyframes shake {
204 | 0%, 100% {transform: translateX(0);}
205 | 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
206 | 20%, 40%, 60%, 80% {transform: translateX(10px);}
207 | }
208 |
209 | .shake {
210 | -webkit-animation-name: shake;
211 | -moz-animation-name: shake;
212 | -o-animation-name: shake;
213 | animation-name: shake;
214 | }
215 |
--------------------------------------------------------------------------------
/img/ajax-loader.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jschr/bootstrap-modal/7dbc60f45c6b3260fed3ef86990f672a777c21b2/img/ajax-loader.gif
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 54 |
55 |
130 |
56 |
57 |
66 | 67 |
76 | 77 | 86 | 87 | 95 |
96 | 97 | 106 |
107 | 108 | 116 |
117 | 118 | 126 |
127 | 128 |
129 |
58 |
65 | Responsive
59 |60 |61 |
62 |
63 |
64 | 66 | 67 |
68 |
75 | Stackable
69 |70 |71 |
72 |
73 |
74 | 76 | 77 | 86 | 87 | 95 |
96 | 97 | 106 |
107 | 108 | 116 |
117 | 118 | 126 |
127 | 128 |
254 |
35 |
36 |
52 |
53 |
132 |
133 |
134 |
168 |
169 |
183 |
184 |
202 |
203 |
220 |
221 |
236 |
237 |
246 |
247 |
260 |
261 |
276 |
277 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
324 |
325 |
326 |
348 |
349 |
377 |
380 |
381 |
382 |
--------------------------------------------------------------------------------
/js/bootstrap-modal.js:
--------------------------------------------------------------------------------
1 | /* ===========================================================
2 | * bootstrap-modal.js v2.2.5
3 | * ===========================================================
4 | * Copyright 2012 Jordan Schroter
5 | *
6 | * Licensed under the Apache License, Version 2.0 (the "License");
7 | * you may not use this file except in compliance with the License.
8 | * You may obtain a copy of the License at
9 | *
10 | * http://www.apache.org/licenses/LICENSE-2.0
11 | *
12 | * Unless required by applicable law or agreed to in writing, software
13 | * distributed under the License is distributed on an "AS IS" BASIS,
14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 | * See the License for the specific language governing permissions and
16 | * limitations under the License.
17 | * ========================================================== */
18 |
19 |
20 | !function ($) {
21 |
22 | "use strict"; // jshint ;_;
23 |
24 | /* MODAL CLASS DEFINITION
25 | * ====================== */
26 |
27 | var Modal = function (element, options) {
28 | this.init(element, options);
29 | };
30 |
31 | Modal.prototype = {
32 |
33 | constructor: Modal,
34 |
35 | init: function (element, options) {
36 | var that = this;
37 |
38 | this.options = options;
39 |
40 | this.$element = $(element)
41 | .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this));
42 |
43 | this.options.remote && this.$element.find('.modal-body').load(this.options.remote, function () {
44 | var e = $.Event('loaded');
45 | that.$element.trigger(e);
46 | });
47 |
48 | var manager = typeof this.options.manager === 'function' ?
49 | this.options.manager.call(this) : this.options.manager;
50 |
51 | manager = manager.appendModal ?
52 | manager : $(manager).modalmanager().data('modalmanager');
53 |
54 | manager.appendModal(this);
55 | },
56 |
57 | toggle: function () {
58 | return this[!this.isShown ? 'show' : 'hide']();
59 | },
60 |
61 | show: function () {
62 | var e = $.Event('show');
63 |
64 | if (this.isShown) return;
65 |
66 | this.$element.trigger(e);
67 |
68 | if (e.isDefaultPrevented()) return;
69 |
70 | this.escape();
71 |
72 | this.tab();
73 |
74 | this.options.loading && this.loading();
75 | },
76 |
77 | hide: function (e) {
78 | e && e.preventDefault();
79 |
80 | e = $.Event('hide');
81 |
82 | this.$element.trigger(e);
83 |
84 | if (!this.isShown || e.isDefaultPrevented()) return;
85 |
86 | this.isShown = false;
87 |
88 | this.escape();
89 |
90 | this.tab();
91 |
92 | this.isLoading && this.loading();
93 |
94 | $(document).off('focusin.modal');
95 |
96 | this.$element
97 | .removeClass('in')
98 | .removeClass('animated')
99 | .removeClass(this.options.attentionAnimation)
100 | .removeClass('modal-overflow')
101 | .attr('aria-hidden', true);
102 |
103 | $.support.transition && this.$element.hasClass('fade') ?
104 | this.hideWithTransition() :
105 | this.hideModal();
106 | },
107 |
108 | layout: function () {
109 | var prop = this.options.height ? 'height' : 'max-height',
110 | value = this.options.height || this.options.maxHeight;
111 |
112 | if (this.options.width){
113 | this.$element.css('width', this.options.width);
114 |
115 | var that = this;
116 | this.$element.css('margin-left', function () {
117 | if (/%/ig.test(that.options.width)){
118 | return -(parseInt(that.options.width) / 2) + '%';
119 | } else {
120 | return -($(this).width() / 2) + 'px';
121 | }
122 | });
123 | } else {
124 | this.$element.css('width', '');
125 | this.$element.css('margin-left', '');
126 | }
127 |
128 | this.$element.find('.modal-body')
129 | .css('overflow', '')
130 | .css(prop, '');
131 |
132 | if (value){
133 | this.$element.find('.modal-body')
134 | .css('overflow', 'auto')
135 | .css(prop, value);
136 | }
137 |
138 | var modalOverflow = $(window).height() - 10 < this.$element.height();
139 |
140 | if (modalOverflow || this.options.modalOverflow) {
141 | this.$element
142 | .css('margin-top', 0)
143 | .addClass('modal-overflow');
144 | } else {
145 | this.$element
146 | .css('margin-top', 0 - this.$element.height() / 2)
147 | .removeClass('modal-overflow');
148 | }
149 | },
150 |
151 | tab: function () {
152 | var that = this;
153 |
154 | if (this.isShown && this.options.consumeTab) {
155 | this.$element.on('keydown.tabindex.modal', '[data-tabindex]', function (e) {
156 | if (e.keyCode && e.keyCode == 9){
157 | var elements = [],
158 | tabindex = Number($(this).data('tabindex'));
159 |
160 | that.$element.find('[data-tabindex]:enabled:visible:not([readonly])').each(function (ev) {
161 | elements.push(Number($(this).data('tabindex')));
162 | });
163 | elements.sort(function(a,b){return a-b});
164 |
165 | var arrayPos = $.inArray(tabindex, elements);
166 | if (!e.shiftKey){
167 | arrayPos < elements.length-1 ?
168 | that.$element.find('[data-tabindex='+elements[arrayPos+1]+']').focus() :
169 | that.$element.find('[data-tabindex='+elements[0]+']').focus();
170 | } else {
171 | arrayPos == 0 ?
172 | that.$element.find('[data-tabindex='+elements[elements.length-1]+']').focus() :
173 | that.$element.find('[data-tabindex='+elements[arrayPos-1]+']').focus();
174 | }
175 |
176 | e.preventDefault();
177 | }
178 | });
179 | } else if (!this.isShown) {
180 | this.$element.off('keydown.tabindex.modal');
181 | }
182 | },
183 |
184 | escape: function () {
185 | var that = this;
186 | if (this.isShown && this.options.keyboard) {
187 | if (!this.$element.attr('tabindex')) this.$element.attr('tabindex', -1);
188 |
189 | this.$element.on('keyup.dismiss.modal', function (e) {
190 | e.which == 27 && that.hide();
191 | });
192 | } else if (!this.isShown) {
193 | this.$element.off('keyup.dismiss.modal')
194 | }
195 | },
196 |
197 | hideWithTransition: function () {
198 | var that = this
199 | , timeout = setTimeout(function () {
200 | that.$element.off($.support.transition.end);
201 | that.hideModal();
202 | }, 500);
203 |
204 | this.$element.one($.support.transition.end, function () {
205 | clearTimeout(timeout);
206 | that.hideModal();
207 | });
208 | },
209 |
210 | hideModal: function () {
211 | var prop = this.options.height ? 'height' : 'max-height';
212 | var value = this.options.height || this.options.maxHeight;
213 |
214 | if (value){
215 | this.$element.find('.modal-body')
216 | .css('overflow', '')
217 | .css(prop, '');
218 | }
219 |
220 | this.$element
221 | .hide()
222 | .trigger('hidden');
223 | },
224 |
225 | removeLoading: function () {
226 | this.$loading.remove();
227 | this.$loading = null;
228 | this.isLoading = false;
229 | },
230 |
231 | loading: function (callback) {
232 | callback = callback || function () {};
233 |
234 | var animate = this.$element.hasClass('fade') ? 'fade' : '';
235 |
236 | if (!this.isLoading) {
237 | var doAnimate = $.support.transition && animate;
238 |
239 | this.$loading = $('53 |
54 |
131 |
55 |
67 | 68 |
77 | 78 | 87 | 88 | 96 |
97 | 98 | 107 |
108 | 109 | 117 |
118 | 119 | 127 |
128 | 129 |
130 | 56 | Using Bootstrap 3? Include the patch file before bootstrap-modal and check out the demo page. 57 |
58 |
59 |
66 | Responsive
60 |61 |62 |
63 |
64 |
65 | 67 | 68 |
69 |
76 | Stackable
70 |71 |72 |
73 |
74 |
75 | 77 | 78 | 87 | 88 | 96 |
97 | 98 | 107 |
108 | 109 | 117 |
118 | 119 | 127 |
128 | 129 |
')
240 | .append(this.options.spinner)
241 | .appendTo(this.$element);
242 |
243 | if (doAnimate) this.$loading[0].offsetWidth; // force reflow
244 |
245 | this.$loading.addClass('in');
246 |
247 | this.isLoading = true;
248 |
249 | doAnimate ?
250 | this.$loading.one($.support.transition.end, callback) :
251 | callback();
252 |
253 | } else if (this.isLoading && this.$loading) {
254 | this.$loading.removeClass('in');
255 |
256 | var that = this;
257 | $.support.transition && this.$element.hasClass('fade')?
258 | this.$loading.one($.support.transition.end, function () { that.removeLoading() }) :
259 | that.removeLoading();
260 |
261 | } else if (callback) {
262 | callback(this.isLoading);
263 | }
264 | },
265 |
266 | focus: function () {
267 | var $focusElem = this.$element.find(this.options.focusOn);
268 |
269 | $focusElem = $focusElem.length ? $focusElem : this.$element;
270 |
271 | $focusElem.focus();
272 | },
273 |
274 | attention: function (){
275 | // NOTE: transitionEnd with keyframes causes odd behaviour
276 |
277 | if (this.options.attentionAnimation){
278 | this.$element
279 | .removeClass('animated')
280 | .removeClass(this.options.attentionAnimation);
281 |
282 | var that = this;
283 |
284 | setTimeout(function () {
285 | that.$element
286 | .addClass('animated')
287 | .addClass(that.options.attentionAnimation);
288 | }, 0);
289 | }
290 |
291 |
292 | this.focus();
293 | },
294 |
295 |
296 | destroy: function () {
297 | var e = $.Event('destroy');
298 |
299 | this.$element.trigger(e);
300 |
301 | if (e.isDefaultPrevented()) return;
302 |
303 | this.$element
304 | .off('.modal')
305 | .removeData('modal')
306 | .removeClass('in')
307 | .attr('aria-hidden', true);
308 |
309 | if (this.$parent !== this.$element.parent()) {
310 | this.$element.appendTo(this.$parent);
311 | } else if (!this.$parent.length) {
312 | // modal is not part of the DOM so remove it.
313 | this.$element.remove();
314 | this.$element = null;
315 | }
316 |
317 | this.$element.trigger('destroyed');
318 | }
319 | };
320 |
321 |
322 | /* MODAL PLUGIN DEFINITION
323 | * ======================= */
324 |
325 | $.fn.modal = function (option, args) {
326 | return this.each(function () {
327 | var $this = $(this),
328 | data = $this.data('modal'),
329 | options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option);
330 |
331 | if (!data) $this.data('modal', (data = new Modal(this, options)));
332 | if (typeof option == 'string') data[option].apply(data, [].concat(args));
333 | else if (options.show) data.show()
334 | })
335 | };
336 |
337 | $.fn.modal.defaults = {
338 | keyboard: true,
339 | backdrop: true,
340 | loading: false,
341 | show: true,
342 | width: null,
343 | height: null,
344 | maxHeight: null,
345 | modalOverflow: false,
346 | consumeTab: true,
347 | focusOn: null,
348 | replace: false,
349 | resize: false,
350 | attentionAnimation: 'shake',
351 | manager: 'body',
352 | spinner: '',
353 | backdropTemplate: ''
354 | };
355 |
356 | $.fn.modal.Constructor = Modal;
357 |
358 |
359 | /* MODAL DATA-API
360 | * ============== */
361 |
362 | $(function () {
363 | $(document).off('click.modal').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
364 | var $this = $(this),
365 | href = $this.attr('href'),
366 | $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))), //strip for ie7
367 | option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data());
368 |
369 | e.preventDefault();
370 | $target
371 | .modal(option)
372 | .one('hide', function () {
373 | $this.focus();
374 | })
375 | });
376 | });
377 |
378 | }(window.jQuery);
379 |
--------------------------------------------------------------------------------
/js/bootstrap-modalmanager.js:
--------------------------------------------------------------------------------
1 | /* ===========================================================
2 | * bootstrap-modalmanager.js v2.2.5
3 | * ===========================================================
4 | * Copyright 2012 Jordan Schroter.
5 | *
6 | * Licensed under the Apache License, Version 2.0 (the "License");
7 | * you may not use this file except in compliance with the License.
8 | * You may obtain a copy of the License at
9 | *
10 | * http://www.apache.org/licenses/LICENSE-2.0
11 | *
12 | * Unless required by applicable law or agreed to in writing, software
13 | * distributed under the License is distributed on an "AS IS" BASIS,
14 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 | * See the License for the specific language governing permissions and
16 | * limitations under the License.
17 | * ========================================================== */
18 |
19 | !function ($) {
20 |
21 | "use strict"; // jshint ;_;
22 |
23 | /* MODAL MANAGER CLASS DEFINITION
24 | * ====================== */
25 |
26 | var ModalManager = function (element, options) {
27 | this.init(element, options);
28 | };
29 |
30 | ModalManager.prototype = {
31 |
32 | constructor: ModalManager,
33 |
34 | init: function (element, options) {
35 | this.$element = $(element);
36 | this.options = $.extend({}, $.fn.modalmanager.defaults, this.$element.data(), typeof options == 'object' && options);
37 | this.stack = [];
38 | this.backdropCount = 0;
39 |
40 | if (this.options.resize) {
41 | var resizeTimeout,
42 | that = this;
43 |
44 | $(window).on('resize.modal', function(){
45 | resizeTimeout && clearTimeout(resizeTimeout);
46 | resizeTimeout = setTimeout(function(){
47 | for (var i = 0; i < that.stack.length; i++){
48 | that.stack[i].isShown && that.stack[i].layout();
49 | }
50 | }, 10);
51 | });
52 | }
53 | },
54 |
55 | createModal: function (element, options) {
56 | $(element).modal($.extend({ manager: this }, options));
57 | },
58 |
59 | appendModal: function (modal) {
60 | this.stack.push(modal);
61 |
62 | var that = this;
63 |
64 | modal.$element.on('show.modalmanager', targetIsSelf(function (e) {
65 |
66 | var showModal = function(){
67 | modal.isShown = true;
68 |
69 | var transition = $.support.transition && modal.$element.hasClass('fade');
70 |
71 | that.$element
72 | .toggleClass('modal-open', that.hasOpenModal())
73 | .toggleClass('page-overflow', $(window).height() < that.$element.height());
74 |
75 | modal.$parent = modal.$element.parent();
76 |
77 | modal.$container = that.createContainer(modal);
78 |
79 | modal.$element.appendTo(modal.$container);
80 |
81 | that.backdrop(modal, function () {
82 | modal.$element.show();
83 |
84 | if (transition) {
85 | //modal.$element[0].style.display = 'run-in';
86 | modal.$element[0].offsetWidth;
87 | //modal.$element.one($.support.transition.end, function () { modal.$element[0].style.display = 'block' });
88 | }
89 |
90 | modal.layout();
91 |
92 | modal.$element
93 | .addClass('in')
94 | .attr('aria-hidden', false);
95 |
96 | var complete = function () {
97 | that.setFocus();
98 | modal.$element.trigger('shown');
99 | };
100 |
101 | transition ?
102 | modal.$element.one($.support.transition.end, complete) :
103 | complete();
104 | });
105 | };
106 |
107 | modal.options.replace ?
108 | that.replace(showModal) :
109 | showModal();
110 | }));
111 |
112 | modal.$element.on('hidden.modalmanager', targetIsSelf(function (e) {
113 | that.backdrop(modal);
114 | // handle the case when a modal may have been removed from the dom before this callback executes
115 | if (!modal.$element.parent().length) {
116 | that.destroyModal(modal);
117 | } else if (modal.$backdrop){
118 | var transition = $.support.transition && modal.$element.hasClass('fade');
119 |
120 | // trigger a relayout due to firebox's buggy transition end event
121 | if (transition) { modal.$element[0].offsetWidth; }
122 | $.support.transition && modal.$element.hasClass('fade') ?
123 | modal.$backdrop.one($.support.transition.end, function () { modal.destroy(); }) :
124 | modal.destroy();
125 | } else {
126 | modal.destroy();
127 | }
128 |
129 | }));
130 |
131 | modal.$element.on('destroyed.modalmanager', targetIsSelf(function (e) {
132 | that.destroyModal(modal);
133 | }));
134 | },
135 |
136 | getOpenModals: function () {
137 | var openModals = [];
138 | for (var i = 0; i < this.stack.length; i++){
139 | if (this.stack[i].isShown) openModals.push(this.stack[i]);
140 | }
141 |
142 | return openModals;
143 | },
144 |
145 | hasOpenModal: function () {
146 | return this.getOpenModals().length > 0;
147 | },
148 |
149 | setFocus: function () {
150 | var topModal;
151 |
152 | for (var i = 0; i < this.stack.length; i++){
153 | if (this.stack[i].isShown) topModal = this.stack[i];
154 | }
155 |
156 | if (!topModal) return;
157 |
158 | topModal.focus();
159 | },
160 |
161 | destroyModal: function (modal) {
162 | modal.$element.off('.modalmanager');
163 | if (modal.$backdrop) this.removeBackdrop(modal);
164 | this.stack.splice(this.getIndexOfModal(modal), 1);
165 |
166 | var hasOpenModal = this.hasOpenModal();
167 |
168 | this.$element.toggleClass('modal-open', hasOpenModal);
169 |
170 | if (!hasOpenModal){
171 | this.$element.removeClass('page-overflow');
172 | }
173 |
174 | this.removeContainer(modal);
175 |
176 | this.setFocus();
177 | },
178 |
179 | getModalAt: function (index) {
180 | return this.stack[index];
181 | },
182 |
183 | getIndexOfModal: function (modal) {
184 | for (var i = 0; i < this.stack.length; i++){
185 | if (modal === this.stack[i]) return i;
186 | }
187 | },
188 |
189 | replace: function (callback) {
190 | var topModal;
191 |
192 | for (var i = 0; i < this.stack.length; i++){
193 | if (this.stack[i].isShown) topModal = this.stack[i];
194 | }
195 |
196 | if (topModal) {
197 | this.$backdropHandle = topModal.$backdrop;
198 | topModal.$backdrop = null;
199 |
200 | callback && topModal.$element.one('hidden',
201 | targetIsSelf( $.proxy(callback, this) ));
202 |
203 | topModal.hide();
204 | } else if (callback) {
205 | callback();
206 | }
207 | },
208 |
209 | removeBackdrop: function (modal) {
210 | modal.$backdrop.remove();
211 | modal.$backdrop = null;
212 | },
213 |
214 | createBackdrop: function (animate, tmpl) {
215 | var $backdrop;
216 |
217 | if (!this.$backdropHandle) {
218 | $backdrop = $(tmpl)
219 | .addClass(animate)
220 | .appendTo(this.$element);
221 | } else {
222 | $backdrop = this.$backdropHandle;
223 | $backdrop.off('.modalmanager');
224 | this.$backdropHandle = null;
225 | this.isLoading && this.removeSpinner();
226 | }
227 |
228 | return $backdrop;
229 | },
230 |
231 | removeContainer: function (modal) {
232 | modal.$container.remove();
233 | modal.$container = null;
234 | },
235 |
236 | createContainer: function (modal) {
237 | var $container;
238 |
239 | $container = $('
')
240 | .css('z-index', getzIndex('modal', this.getOpenModals().length))
241 | .appendTo(this.$element);
242 |
243 | if (modal && modal.options.backdrop != 'static') {
244 | $container.on('click.modal', targetIsSelf(function (e) {
245 | modal.hide();
246 | }));
247 | } else if (modal) {
248 | $container.on('click.modal', targetIsSelf(function (e) {
249 | modal.attention();
250 | }));
251 | }
252 |
253 | return $container;
254 |
255 | },
256 |
257 | backdrop: function (modal, callback) {
258 | var animate = modal.$element.hasClass('fade') ? 'fade' : '',
259 | showBackdrop = modal.options.backdrop &&
260 | this.backdropCount < this.options.backdropLimit;
261 |
262 | if (modal.isShown && showBackdrop) {
263 | var doAnimate = $.support.transition && animate && !this.$backdropHandle;
264 |
265 | modal.$backdrop = this.createBackdrop(animate, modal.options.backdropTemplate);
266 |
267 | modal.$backdrop.css('z-index', getzIndex( 'backdrop', this.getOpenModals().length ));
268 |
269 | if (doAnimate) modal.$backdrop[0].offsetWidth; // force reflow
270 |
271 | modal.$backdrop.addClass('in');
272 |
273 | this.backdropCount += 1;
274 |
275 | doAnimate ?
276 | modal.$backdrop.one($.support.transition.end, callback) :
277 | callback();
278 |
279 | } else if (!modal.isShown && modal.$backdrop) {
280 | modal.$backdrop.removeClass('in');
281 |
282 | this.backdropCount -= 1;
283 |
284 | var that = this;
285 |
286 | $.support.transition && modal.$element.hasClass('fade')?
287 | modal.$backdrop.one($.support.transition.end, function () { that.removeBackdrop(modal) }) :
288 | that.removeBackdrop(modal);
289 |
290 | } else if (callback) {
291 | callback();
292 | }
293 | },
294 |
295 | removeSpinner: function(){
296 | this.$spinner && this.$spinner.remove();
297 | this.$spinner = null;
298 | this.isLoading = false;
299 | },
300 |
301 | removeLoading: function () {
302 | this.$backdropHandle && this.$backdropHandle.remove();
303 | this.$backdropHandle = null;
304 | this.removeSpinner();
305 | },
306 |
307 | loading: function (callback) {
308 | callback = callback || function () { };
309 |
310 | this.$element
311 | .toggleClass('modal-open', !this.isLoading || this.hasOpenModal())
312 | .toggleClass('page-overflow', $(window).height() < this.$element.height());
313 |
314 | if (!this.isLoading) {
315 |
316 | this.$backdropHandle = this.createBackdrop('fade', this.options.backdropTemplate);
317 |
318 | this.$backdropHandle[0].offsetWidth; // force reflow
319 |
320 | var openModals = this.getOpenModals();
321 |
322 | this.$backdropHandle
323 | .css('z-index', getzIndex('backdrop', openModals.length + 1))
324 | .addClass('in');
325 |
326 | var $spinner = $(this.options.spinner)
327 | .css('z-index', getzIndex('modal', openModals.length + 1))
328 | .appendTo(this.$element)
329 | .addClass('in');
330 |
331 | this.$spinner = $(this.createContainer())
332 | .append($spinner)
333 | .on('click.modalmanager', $.proxy(this.loading, this));
334 |
335 | this.isLoading = true;
336 |
337 | $.support.transition ?
338 | this.$backdropHandle.one($.support.transition.end, callback) :
339 | callback();
340 |
341 | } else if (this.isLoading && this.$backdropHandle) {
342 | this.$backdropHandle.removeClass('in');
343 |
344 | var that = this;
345 | $.support.transition ?
346 | this.$backdropHandle.one($.support.transition.end, function () { that.removeLoading() }) :
347 | that.removeLoading();
348 |
349 | } else if (callback) {
350 | callback(this.isLoading);
351 | }
352 | }
353 | };
354 |
355 | /* PRIVATE METHODS
356 | * ======================= */
357 |
358 | // computes and caches the zindexes
359 | var getzIndex = (function () {
360 | var zIndexFactor,
361 | baseIndex = {};
362 |
363 | return function (type, pos) {
364 |
365 | if (typeof zIndexFactor === 'undefined'){
366 | var $baseModal = $('').appendTo('body'),
367 | $baseBackdrop = $('').appendTo('body');
368 |
369 | baseIndex['modal'] = +$baseModal.css('z-index');
370 | baseIndex['backdrop'] = +$baseBackdrop.css('z-index');
371 | zIndexFactor = baseIndex['modal'] - baseIndex['backdrop'];
372 |
373 | $baseModal.remove();
374 | $baseBackdrop.remove();
375 | $baseBackdrop = $baseModal = null;
376 | }
377 |
378 | return baseIndex[type] + (zIndexFactor * pos);
379 |
380 | }
381 | }());
382 |
383 | // make sure the event target is the modal itself in order to prevent
384 | // other components such as tabsfrom triggering the modal manager.
385 | // if Boostsrap namespaced events, this would not be needed.
386 | function targetIsSelf(callback){
387 | return function (e) {
388 | if (e && this === e.target){
389 | return callback.apply(this, arguments);
390 | }
391 | }
392 | }
393 |
394 |
395 | /* MODAL MANAGER PLUGIN DEFINITION
396 | * ======================= */
397 |
398 | $.fn.modalmanager = function (option, args) {
399 | return this.each(function () {
400 | var $this = $(this),
401 | data = $this.data('modalmanager');
402 |
403 | if (!data) $this.data('modalmanager', (data = new ModalManager(this, option)));
404 | if (typeof option === 'string') data[option].apply(data, [].concat(args))
405 | })
406 | };
407 |
408 | $.fn.modalmanager.defaults = {
409 | backdropLimit: 999,
410 | resize: true,
411 | spinner: '',
412 | backdropTemplate: ''
413 | };
414 |
415 | $.fn.modalmanager.Constructor = ModalManager
416 |
417 | // ModalManager handles the modal-open class so we need
418 | // to remove conflicting bootstrap 3 event handlers
419 | $(function () {
420 | $(document).off('show.bs.modal').off('hidden.bs.modal');
421 | });
422 |
423 | }(jQuery);
424 |
--------------------------------------------------------------------------------
/modal_ajax_test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 | Modal header
4 |
6 |
10 |
16 |
--------------------------------------------------------------------------------
/params.json:
--------------------------------------------------------------------------------
1 | {"body":"### Welcome to GitHub Pages.\r\nThis automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:\r\n\r\n```\r\n$ cd your_repo_root/repo_name\r\n$ git fetch origin\r\n$ git checkout gh-pages\r\n```\r\n\r\nIf you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.\r\n\r\n### Designer Templates\r\nWe've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.\r\n\r\n### Rather Drive Stick?\r\nIf you prefer to not use the automatic generator, push a branch named `gh-pages` to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.\r\n\r\n### Authors and Contributors\r\nYou can @mention a GitHub username to generate a link to their profile. The resulting `` element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.\r\n\r\n### Support or Contact\r\nHaving trouble with Pages? Check out the documentation at http://help.github.com/pages or contact support@github.com and we’ll help you sort it out.","tagline":"Custom implementation of twitter bootstrap's modal class.","note":"Don't delete this file! It's used internally to help with page regeneration.","name":"Bootstrap-modal","google":""}
--------------------------------------------------------------------------------
11 |
12 |
13 |
14 |
15 | This modal was loaded in via ajax
This is some other tab content