-
Notifications
You must be signed in to change notification settings - Fork 72
/
modal.js
120 lines (105 loc) · 4.14 KB
/
modal.js
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
$(function() {
$("body").append('<div id="modal_background"></div>');
$("body").append('<div id="second_modal_background"></div>');
$("body").append('<div id="third_modal_background"></div>');
$(document).keyup(function(e) {
if (e.keyCode == 27) {
do_close_modal(g_modal_dialogs[g_modal_dialogs.length - 1],
['#modal_background',
'#second_modal_background',
'#third_modal_background'][g_modal_dialogs.length - 1]);
}
});
});
// A stack of selectors for the currently-open modal dialog(s), if any.
var g_modal_dialogs = []
function do_show_modal(modal_selector, focus, submit_handler, background_selector, z_index) {
if (background_selector) {
// background_selector == false leaves the background in place, if we're
// going to display another modal immediately after closing this one.
// Otherwise there's a race between fading in the background for the new
// modal and fading out the background for the closing modal.
var modal_background = $(background_selector);
modal_background.css({'display': 'block',
'opacity': 0});
modal_background.fadeTo(200, 0.5);
}
var modal_div = $(modal_selector);
if (typeof submit_handler != 'undefined' && submit_handler) {
var form = modal_div.find("form");
form.off("submit");
form.on("submit", submit_handler);
}
g_modal_dialogs.push(modal_selector);
if (modal_div.closest('.modal_frame').length == 0) {
modal_div.wrap('<div class="modal_frame"></div>');
modal_div.closest('.modal_frame').css({ 'z-index': z_index });
}
modal_div.closest('.modal_frame').removeClass('hidden');
var modal_width = modal_div.outerWidth();
modal_div.removeClass("hidden");
modal_div.css({
'display': 'block',
'position': 'absolute',
'opacity': 0,
'left' : 50 + '%',
'margin-left': -(modal_width/2) + "px"
});
modal_div.fadeTo(200, 1);
if (focus) {
setTimeout(function() { $(focus).focus(); }, 210);
}
}
function do_close_modal(modal_selector, background_selector) {
g_modal_dialogs.pop();
$(background_selector).fadeOut(200);
$(modal_selector).closest('.modal_frame').addClass('hidden');
$(modal_selector).css({'display': 'none'});
}
function show_modal(modal_selector, focus, submit_handler) {
if (arguments.length == 2 && Object.prototype.toString.call(focus) == "[object Function]") {
submit_handler = focus;
focus = null;
}
do_show_modal(modal_selector, focus, submit_handler,
"#modal_background", 11000);
}
function close_modal(modal_selector) {
do_close_modal(modal_selector, "#modal_background");
}
function close_modal_leave_background(modal_selector) {
do_close_modal(modal_selector, false);
}
// If we want to morph one dialog into another, at the same level; everything's
// the same except do_close_modal for fading the background. Because the
// background's not affected, the level of the modal doesn't matter.
// hide_modal() should be followed immediately with another show_modal call of
// some kind.
function hide_modal(modal_selector) {
g_modal_dialogs.pop();
$(modal_selector).closest('.modal_frame').addClass('hidden');
$(modal_selector).css({'display': 'none'});
}
// For a modal that's supposed to appear in front of another ("ordinary") modal.
function show_secondary_modal(modal_selector, focus, submit_handler) {
if (arguments.length == 2 && Object.prototype.toString.call(focus) == "[object Function]") {
submit_handler = focus;
focus = null;
}
do_show_modal(modal_selector, focus, submit_handler,
"#second_modal_background", 13000);
}
function close_secondary_modal(modal_selector) {
do_close_modal(modal_selector, "#second_modal_background");
}
function show_tertiary_modal(modal_selector, focus, submit_handler) {
if (arguments.length == 2 && Object.prototype.toString.call(focus) == "[object Function]") {
submit_handler = focus;
focus = null;
}
do_show_modal(modal_selector, focus, submit_handler,
"#third_modal_background", 15000);
}
function close_tertiary_modal(modal_selector) {
do_close_modal(modal_selector, "#third_modal_background");
}