| 9 |
lars |
1 |
var UIExtendedModals = function () {
|
|
|
2 |
|
|
|
3 |
|
|
|
4 |
return {
|
|
|
5 |
//main function to initiate the module
|
|
|
6 |
init: function () {
|
|
|
7 |
|
|
|
8 |
// general settings
|
|
|
9 |
$.fn.modal.defaults.spinner = $.fn.modalmanager.defaults.spinner =
|
|
|
10 |
'<div class="loading-spinner" style="width: 200px; margin-left: -100px;">' +
|
|
|
11 |
'<div class="progress progress-striped active">' +
|
|
|
12 |
'<div class="progress-bar" style="width: 100%;"></div>' +
|
|
|
13 |
'</div>' +
|
|
|
14 |
'</div>';
|
|
|
15 |
|
|
|
16 |
$.fn.modalmanager.defaults.resize = true;
|
|
|
17 |
|
|
|
18 |
//dynamic demo:
|
|
|
19 |
$('.dynamic .demo').click(function(){
|
|
|
20 |
var tmpl = [
|
|
|
21 |
// tabindex is required for focus
|
|
|
22 |
'<div class="modal hide fade" tabindex="-1">',
|
|
|
23 |
'<div class="modal-header">',
|
|
|
24 |
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>',
|
|
|
25 |
'<h4 class="modal-title">Modal header</h4>',
|
|
|
26 |
'</div>',
|
|
|
27 |
'<div class="modal-body">',
|
|
|
28 |
'<p>Test</p>',
|
|
|
29 |
'</div>',
|
|
|
30 |
'<div class="modal-footer">',
|
|
|
31 |
'<a href="#" data-dismiss="modal" class="btn btn-default">Close</a>',
|
|
|
32 |
'<a href="#" class="btn btn-primary">Save changes</a>',
|
|
|
33 |
'</div>',
|
|
|
34 |
'</div>'
|
|
|
35 |
].join('');
|
|
|
36 |
|
|
|
37 |
$(tmpl).modal();
|
|
|
38 |
});
|
|
|
39 |
|
|
|
40 |
//ajax demo:
|
|
|
41 |
var $modal = $('#ajax-modal');
|
|
|
42 |
|
|
|
43 |
$('#ajax-demo').on('click', function(){
|
|
|
44 |
// create the backdrop and wait for next modal to be triggered
|
|
|
45 |
$('body').modalmanager('loading');
|
|
|
46 |
var el = $(this);
|
|
|
47 |
|
|
|
48 |
setTimeout(function(){
|
|
|
49 |
$modal.load(el.attr('data-url'), '', function(){
|
|
|
50 |
$modal.modal();
|
|
|
51 |
});
|
|
|
52 |
}, 1000);
|
|
|
53 |
});
|
|
|
54 |
|
|
|
55 |
$modal.on('click', '.update', function(){
|
|
|
56 |
$modal.modal('loading');
|
|
|
57 |
setTimeout(function(){
|
|
|
58 |
$modal
|
|
|
59 |
.modal('loading')
|
|
|
60 |
.find('.modal-body')
|
|
|
61 |
.prepend('<div class="alert alert-info fade in">' +
|
|
|
62 |
'Updated!<button type="button" class="close" data-dismiss="alert">×</button>' +
|
|
|
63 |
'</div>');
|
|
|
64 |
}, 1000);
|
|
|
65 |
});
|
|
|
66 |
}
|
|
|
67 |
|
|
|
68 |
};
|
|
|
69 |
|
|
|
70 |
}();
|
|
|
71 |
|
|
|
72 |
jQuery(document).ready(function() {
|
|
|
73 |
UIExtendedModals.init();
|
|
|
74 |
});
|