MoodalBox.js
3.46 KB
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
var MoodalBox = new Class({
Implements: [Options],
// Çàäàäèìñÿ äâóìÿ îïöèÿìè.
options: {
// Ïðîçðà÷íîñòü îâåðëåÿ ïîñëå ïîêàçà âñïëûâàþùåãî îêíà.
destinationOverlayOpacity: 0.7,
// Âîçìîæíîñòü ñïðÿòàòü îêíî êëèêîì ïî îâåðëåþ.
allowManualClose: true
},
// Â êîíñòðóêòîð ïåðåäàåì äâà îáÿçàòåëüíûõ àðãóìåíòà è íåîáÿçàòåëüíûé àðãóìåíò ñ îïöèÿìè.
// element — èäåíòèôèêàòîð ýëåìåíòà îêíà.
// overlay — èäåíòèôèêàòîð ýëåìåíòà îâåðëåÿ.
initialize: function(element, overlay, options)
{
this.setOptions(options);
// Ïîëó÷àåì ýëåìåíò ïî åãî èäåíòèôèêàòîðó.
this.element = $(element);
this.overlay = $(overlay);
// Ïðîâåðÿåì îïöèþ âîçìîæíîñòè ñêðûòèÿ îêíà ïî êëèêó.
if (this.options.allowManualClose)
// Öåïëÿåì íà êëèê ïî îâåðëåþ ìåòîä ñêðûòèÿ.
// Ïðèìå÷àíèå: ôóíêöèÿ bind(param) âîçâðàùàåò ìåòîä this.hide, âíóòðè êîòîðîãî ïåðåìåííàÿ this
// ïðèâÿçàíà ê param. Åñëè îïóñòèòü âûçîâ bind, òîãäà this âíóòðè this.hide áóäåò ïðèâÿçàí ê ýëåìåíòó,
// ñîáûòèå â êîòîðîì ìû îáðàáàòûâàåì, ò.å. ê this.overlay.
this.overlay.addEvent("click", this.hide.bind(this));
// Ïîëó÷àåì ðàçìåðû îêíà äëÿ ïîñëåäóþùåé åãî öåíòðîâêè.
this.targetCoords = this.element.getCoordinates();
// Ýôôåêòû äëÿ ïîêàçûâàíèÿ/ñêðûòèÿ îêíà è îâåðëåÿ.
// Èñïîëüçóåòñÿ ýôôåêò, èçìåíÿþùèé çàäàííîå CSS-ñâîéñòâî âî âðåìåíè, â äàííîì ñëó÷àå — ýòî ïðîçðà÷íîñòü.
this.fx = {
overlayAnimation: new Fx.Tween(this.overlay, { property: "opacity" }),
elementAnimation: new Fx.Tween(this.element, { property: "opacity" })
}
},
close: function(){
this.fx.overlayAnimation.start(0);
this.fx.elementAnimation.start(0);
},
// Âûçîâ ýòîãî ìåòîäà ïîêàæåò âñïëûâàþùåå îêíî.
show: function()
{
// Âûñòàâëÿåì ýëåìåíòû â íóæíûå ìåñòà.
this.setPosition();
// Çàïóñêàåì àíèìàöèþ ïîêàçà (èçìåíåíèå ïðîçðà÷íîñòè äî âèäèìûõ çíà÷åíèé).
this.fx.overlayAnimation.start(0, this.options.destinationOverlayOpacity);
this.fx.elementAnimation.start(0, 1);
},
// Âûçîâ ýòîãî ìåòîäà ñêðîåò âñïëûâàþùåå îêíî.
hide: function()
{
// Çàïóñêàåì àíèìàöèþ ñêðûòèÿ (èçìåíåíèå ïðîçðà÷íîñòè äî íåâèäèìûõ çíà÷åíèé).
this.fx.overlayAnimation.start(this.options.destinationOverlayOpacity, 0);
this.fx.elementAnimation.start(1, 0);
},
// Çäåñü ìû êîððåêòèðóåì ïîçèöèþ âñïëûâàþùåãî îêíà íà ñòðàíèöå è
// ðàçìåðû îâåðëåÿ.
setPosition: function()
{
this.element.setStyles({
"marginLeft": -(this.targetCoords.width / 2),
"marginTop": -(this.targetCoords.height / 2)
});
this.overlay.setStyles({
'top': -$(window).getScroll().y,'height':$(window).getScrollSize().y+$(window).getScroll().y
// "top": window.getScrollTop(),
// "height": window.getHeight()
});
}
});