Приветствую, уважаемые гуру.
Раньше часто попадался такой блок на других сайтах, а теперь самому понадобилось, но что-то не могу отыскать. Я не гуру кодинга, потому делаю по аналогии из ранее увиденного.
Суть блока такая:
1) При первом заходе на сайт через 4 секунды появляется окошечко в нижней части сайта (как бы прилипшее, и не меняющее своего положения при прокрутке), к примеру, 300px на 300px со своим "полным дизайном".
2) Если пользователь нажмёт на крестик "закрытия" в данном блоке (или ссылку, которая будет открыта в новом окне), то окошечко моментально уменьшится в размере (изменится дизайн, станет "компактным", не мешающим чтению контента) и станет, к примеру, 300px на 40px, но так и останется прикреплённым к краю при прокрутке. И на всех последующих открываемых страницах сайта будет отображаться сразу без 4-х секундной задержки, и в компактном режиме.
А если проигнорирует и ничего не нажмёт в том окошечке, то при переходе на другую страницу опять отобразится через 4 секунды данное окно в "полном дизайне".
Понимаю, что тут не обойтись без jquery.cookie.js - дабы запоминался (в случае действия со стороны посетителя) "компактный режим" данного окна в течении суток.
Как такое реализовать, или где то можно подсмотреть?
Вот, я сделал "полный" и "компактный" блок
https://jsfiddle.net/t6rqty8d/1/
но т.к. с JS я очень плохо знаком, то блок с полного на компактный в примере переключается в зависимости от разрешения экрана - если меньше 768px, то показывается компактный. Это для примера, в js, как я понимаю, с помощью js добавляется подстиль и блок меняет свой дизайн.
Помогите пожалуйста наделить его описанным выше функционалом.
Простой
