Как написать такую кнопку на чистом JS, без jquery?

Почти на каждом сайте есть такая кнопка (свяжитесь с нами)
1) через несколько секунд после загрузки страницы появляется кнопка такая:
5d4b18876f90e828312331.png
2) а еще через несколько секунд возле кнопки появляется еще окошко : Здраствуйте я Оксана, готова вам помочь...
5d4b1972ba6bd519434976.png

Только что написал простой макет задачи на html и css. Помогите реализовать его функционал с помощью чистого JS
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>

.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
  display: none;
}

.wrapper{
  height: 1000px;
    background: grey;
}

.page img{
  height: 100px;
  width: 100px;
  margin-left: 1500px;
  margin-top: 800px;
}
    
.window-dialog{
    width: 300px;
    height: 100px;
    background: white;
    color:black;
    border: 3px solid black;
    position: absolute;
    top:800px;
    left:1180px;
}
</style>
<body>
<div class="wrapper">

<div class="button">
   <a class="page" href=""><img src="https://st3.depositphotos.com/1688079/16366/i/1600/depositphotos_163666288-stock-photo-contact-us-phone-icon-elegant.jpg"></a>
</div>

<div class="window-dialog">
    <div class="field"> 
       <p>Здраствуйте, я Оксана чем могу помочь</p>
    </div>
</div>

</div>
</body>
<script>

//... Функционал

</script>

</html>
  • Вопрос задан
  • 806 просмотров
Решения вопроса 2
Neolot
@Neolot
Make the web great again
Здесь есть аналоги jQuery-методов на "чистом" JS, с примерами:
youmightnotneedjquery.com
Ответ написан
samdeweb
@samdeweb
Начинающий верстальщик
Здравствуйте. Увидел, что в комментариях ответили, но всё же свой вариант оставлю здесь, да и с анимацией:). Если понадобиться - можете использовать. Я тоже совсем недавно начал изучение JS, но что то простенькое мог набросать. Там написал комметарий к каждому действию, чтобы более менее понятнее было.

https://jsfiddle.net/91pghxzt/1/

P.S быстро набросал, по этому не использовал ваш свёрстанный шаблон.
P.S.S. совет: если будете использовать этот код, сначала попробуйте понять каждую строчку, а не просто скопируйте его к себе. Это просто, на будущее :)
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Dubrovin
Никак. Подобный функционал реализуется не только, с помощью JS. Должна быть ещё серверная часть, например, на PHP + клиентское приложение (может быть на чём угодно, например, под Windows). Обычно данный функционал реализуется с помощью стороннего сервиса, например, jivochat
Ответ написан
FrontEndTarot
@FrontEndTarot
Front-end developer
У виджета (блок или компонент) кнопки 3 состояния:
1-просто кружок с после загрузки,
2-с добавленным баблом (появляется по setTimeout, плюс вешается clearTimeout по клику, если чел сам нажал)
3-с закрытым бабблом и открытым чатом (на клик по кнопке и бабблу вешается закрытие баббла и открытие модальника с чатом)
И снова состояние 1, если чат свернули (вешаешь на клик по кнопке показ модалки с чатом, на outerclick/"свернуть чат" - скрытие модалки с чатом.
Таким образом, верстаешь эти все части и вешаешь обработку событий на переходы между ними. Сам чат имеет уже свою беково-фронтовую реализацию.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы