https://carolineangell.com/js/functions.js

1$(document).ready(function() {	
2
3//select all the a tag with name equal to modal
4$('a[name=modal]').click(function(e) {
5//Cancel the link behavior
6e.preventDefault();
7
8//Get the A tag
9var id = $(this).attr('href');
10
11//Get the screen height and width
12var maskHeight = $(document).height();
13var maskWidth = $(window).width();
14
15//Set heigth and width to mask to fill up the whole screen
16$('#mask').css({'width':maskWidth,'height':maskHeight});
17
18//transition effect		
19$('#mask').fadeIn(1000);	
20$('#mask').fadeTo("slow",0.8);	
21
22//Get the window height and width
23var winH = $(window).height();
24var winW = $(window).width();
25
26//Set the popup window to center
27$(id).css('top',  winH/2-$(id).height()/2);
28$(id).css('left', winW/2-$(id).width()/2);
29
30//transition effect
31$(id).fadeIn(2000); 
32
33});
34
35//if close button is clicked
36$('.window .close').click(function (e) {
37//Cancel the link behavior
38e.preventDefault();
39
40$('#mask').hide();
41$('.window').hide();
42});		
43
44//if mask is clicked
45$('#mask').click(function () {
46$(this).hide();
47$('.window').hide();
48});			
49
50$(window).resize(function () {
51
52var box = $('#boxes .window');
53
54//Get the screen height and width
55var maskHeight = $(document).height();
56var maskWidth = $(window).width();
57
58//Set height and width to mask to fill up the whole screen
59$('#mask').css({'width':maskWidth,'height':maskHeight});
60
61//Get the window height and width
62var winH = $(window).height();
63var winW = $(window).width();
64
65//Set the popup window to center
66box.css('top',  winH/2 - box.height()/2);
67box.css('left', winW/2 - box.width()/2);
68
69});
70
71});
72
73$(document).ready(function(){
74$("img.a").hover(
75function() {
76$(this).stop().animate({"opacity": "0"}, "slow");
77},
78function() {
79$(this).stop().animate({"opacity": "1"}, "slow");
80});
81
82});
83
84
85
86
87
88
89
90
91
92
93
94
95$(document).ready(function() {	
96
97//select all the a tag with name equal to modal
98$('a[name=modal2]').click(function(e) {
99//Cancel the link behavior
100e.preventDefault();
101
102//Get the A tag
103var id = $(this).attr('href');
104
105//Get the screen height and width
106var maskHeight = $(document).height();
107var maskWidth = $(window).width();
108
109//Set heigth and width to mask to fill up the whole screen
110$('#mask2').css({'width':maskWidth,'height':maskHeight});
111
112//transition effect		
113$('#mask2').fadeIn(1000);	
114$('#mask2').fadeTo("slow",0.8);	
115
116//Get the window height and width
117var winH = $(window).height();
118var winW = $(window).width();
119
120//Set the popup window to center
121$(id).css('top',  winH/2-$(id).height()/1);
122$(id).css('left', winW/2-$(id).width()/2);
123
124//transition effect
125$(id).fadeIn(2000); 
126
127});
128
129//if close button is clicked
130$('.window2 .close2').click(function (e) {
131//Cancel the link behavior
132e.preventDefault();
133
134$('#mask2').hide();
135$('.window2').hide();
136});		
137
138//if mask is clicked
139$('#mask2').click(function () {
140$(this).hide();
141$('.window2').hide();
142});			
143
144$(window).resize(function () {
145
146var box = $('#boxes2 .window2');
147
148//Get the screen height and width
149var maskHeight = $(document).height();
150var maskWidth = $(window).width();
151
152//Set height and width to mask to fill up the whole screen
153$('#mask2').css({'width':maskWidth,'height':maskHeight});
154
155//Get the window height and width
156var winH = $(window).height();
157var winW = $(window).width();
158
159//Set the popup window to center
160box.css('top',  winH/2 - box.height()/2);
161box.css('left', winW/2 - box.width()/2);
162
163});
164
165});
166
167$(document).ready(function(){
168$("img.a").hover(
169function() {
170$(this).stop().animate({"opacity": "0"}, "slow");
171},
172function() {
173$(this).stop().animate({"opacity": "1"}, "slow");
174});
175
176});