Здравствуйте! У меня возникла следующая проблема. Дело в том, что мне нужно сделать окно при нажатии на которое, показывалась бы форма, в которой можно связаться с консультантом. Я написал одну функцию, чтобы большое окно отодвигалось до маленького окна вниз и исчезало. Она работает. Теперь мне нужно сделать так, чтобы при нажатии на маленькое окно, большое окно выдвигалось бы обратно вверх в прежнее положение.
ниже я выложил код и gif анимацию в архиве. Буду благодарен если сможете чем-нибудь помочь!
===================================================================================
CSS
#supportField{
height: 400px;
width: 300px;
display: block;
position: fixed;
top: 422px;
right: 30px;
}
#service {
border-top-right-radius: 20%;
width: 296px;
height: 60px;
background-color: rgb(48, 125, 246);
color: azure;
text-align: center;
font-family: ‘Gill Sans’, ‘Gill Sans MT’, Calibri, ‘Trebuchet MS’, sans-serif;
display: block;
}
h5 {
padding-top: 20px;
}
#form1 {
background-color: rgb(187, 187, 196);
width: 297px;
display: block;
}
#emptySpace {
width: 290px;
background-color: aliceblue;
width: 296px;
height: 230px;
display: block;
}
#messageBox {
width: 270px;
height: 70px;
display: block;
padding-left: 10px;
margin-left: 13px;
margin-bottom: 5px;
}
#sendButton {
background-color: rgb(48, 125, 246);
color: azure;
border-radius: 10%;
border-color: rgb(48, 125, 246);
display: block;
margin-left: 220px;
margin-bottom: 10px;
}
#hiddenField {
border-top-right-radius: 20%;
width: 297px;
height: 60px;
background-color: rgb(48, 125, 246);
color: azure;
text-align: center;
font-family: ‘Gill Sans’, ‘Gill Sans MT’, Calibri, ‘Trebuchet MS’, sans-serif;
position: fixed;
top: 756px;
right: 33px;
}
#hiddenField:hover {
background-color: rgb(19, 73, 158);
border-top-right-radius: 20%;
color: white;
}
===================================================================================
HTML
01
<!-- Contact field -->
02
03
<
div
id
=
"hiddenField"
onclick
=
"moveUp()"
><
h5
>Kontakta oss</
h5
></
div
>
04
05
06
<
div
id
=
"supportField"
>
07
<
button
onclick
=
"moveDown()"
>Сlose</
button
>
08
<
div
id
=
"service"
><
h5
>Kontakta vår kundservice online</
h5
></
div
>
09
<
div
id
=
"emptySpace"
></
div
>
10
<
form
id
=
"form1"
action
=
"#"
method
=
"#"
>
11
<
textarea
id
=
"messageBox"
name
=
"message"
placeholder
=
"Your message"
rows
=
"4"
cols
=
"40"
></
textarea
>
12
<
button
id
=
"sendButton"
type
=
"submit"
value
=
"Skicka"
>Skicka</
button
>
13
</
form
>
14
</
div
>
===================================================================================
JS
01
//////////////////////////////////////////////Function doesn'works//////////////////////////////////////////////////
02
03
04
function
moveUp(){
05
var
elem = document.getElementById(
"supportField"
);
06
document.getElementById(
"hiddenField"
).style.display =
"none"
;
07
var
pos = 761;
08
var
id = setInterval(frame, 1);
09
function
frame() {
10
if
(pos === 422) {
11
clearInterval(id);
12
}
else
{
13
pos--;
14
elem.style.top = pos +
'px'
;
15
document.getElementById(
"supportField"
).style.display =
"block"
;
16
document.getElementById(
"hiddenField"
).style.display =
"none"
17
console.log(pos);
18
}
19
20
}
21
return
0;
22
}
23
24
25
//////////////////////////////////////////////Function works//////////////////////////////////////////////////
26
27
28
function
moveDown() {
29
var
elem = document.getElementById(
"supportField"
);
30
var
pos = 422;
31
var
id = setInterval(frame, 1);
32
var
id = setInterval(frame, 1);
33
var
id = setInterval(frame, 1);
34
var
id = setInterval(frame, 1);
35
function
frame() {
36
if
(pos === 761) {
37
clearInterval(id);
38
document.getElementById(
"supportField"
).style.display =
"none"
;
39
}
else
{
40
pos++;
41
elem.style.top = pos +
'px'
;
42
console.log(pos);
43
}
44
}
45
return
0;
46
}