Нужно перемесить div элемент в перврначальное положение.
Вложений: 3
Здравствуйте! У меня возникла следующая проблема. Дело в том, что мне нужно сделать окно при нажатии на которое, показывалась бы форма, в которой можно связаться с консультантом. Я написал одну функцию, чтобы большое окно отодвигалось до маленького окна вниз и исчезало. Она работает. Теперь мне нужно сделать так, чтобы при нажатии на маленькое окно, большое окно выдвигалось бы обратно вверх в прежнее положение.
ниже я выложил код и 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 <!-- Contact field --> <div id="hiddenField" onclick="moveUp()"><h5>Kontakta oss</h5></div> <div id="supportField"> <button onclick="moveDown()">Сlose</button> <div id="service"><h5>Kontakta vår kundservice online</h5></div> <div id="emptySpace"></div> <form id="form1" action="#" method="#"> <textarea id="messageBox" name="message" placeholder="Your message" rows="4" cols="40"></textarea> <button id="sendButton" type="submit" value="Skicka">Skicka</button> </form> </div> JS //////////////////////////////////////////////Function doesn'works////////////////////////////////////////////////// function moveUp(){ var elem = document.getElementById("supportField"); document.getElementById("hiddenField").style.display = "none"; var pos = 761; var id = setInterval(frame, 1); function frame() { if (pos === 422) { clearInterval(id); } else { pos--; elem.style.top = pos + 'px'; document.getElementById("supportField").style.display = "block"; document.getElementById("hiddenField").style.display = "none" console.log(pos); } } return 0; } //////////////////////////////////////////////Function works////////////////////////////////////////////////// function moveDown() { var elem = document.getElementById("supportField"); var pos = 422; var id = setInterval(frame, 1); var id = setInterval(frame, 1); var id = setInterval(frame, 1); var id = setInterval(frame, 1); function frame() { if (pos === 761) { clearInterval(id); document.getElementById("supportField").style.display = "none"; } else { pos++; elem.style.top = pos + 'px'; console.log(pos); } } return 0; } Вложение 4037 Вложение 4033 |
Darkgohn95,
css!!! <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> body{ position: relative; } #supportField{ height: 400px; width: 300px; position: fixed; bottom: -422px; right: 30px; transition: 1s; } #supportField.up{ bottom : 40px; } #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; bottom: 6px; right: 33px; transition: .3s .9s; } #hiddenField.hide{ transition-delay: 0s; transform: scale(0); opacity: 0 } #hiddenField:hover { background-color: rgb(19, 73, 158); border-top-right-radius: 20%; color: white; } </style> <script> //////////////////////////////////////////////Function doesn'works////////////////////////////////////////////////// function moveUp(){ document.getElementById("supportField").classList.add("up"); document.getElementById("hiddenField").classList.add("hide"); } //////////////////////////////////////////////Function works////////////////////////////////////////////////// function moveDown() { document.getElementById("supportField").classList.remove("up"); document.getElementById("hiddenField").classList.remove("hide"); } </script> </head> <body> <!-- Contact field --> <div id="hiddenField" onclick="moveUp()"><h5>Kontakta oss</h5></div> <div id="supportField"> <button onclick="moveDown()">Сlose</button> <div id="service"><h5>Kontakta vår kundservice online</h5></div> <div id="emptySpace"></div> <form id="form1" action="#" method="#"> <textarea id="messageBox" name="message" placeholder="Your message" rows="4" cols="40"></textarea> <button id="sendButton" type="submit" value="Skicka">Skicka</button> </form> </div> </body> </html> |
рони,
Спасибо большое за помощь! :) |
Часовой пояс GMT +3, время: 17:28. |