Suitcase. 5 самых нужных эффектов на jQuery в одном скрипте

Как создать всплывающее окно по клику, по таймеру, один раз (cookie)

Создадим обычное, всплывающее окно

Шаг 1 Добавляем код кнопки

Откройте шаблон главной страницы и в нужное место добавьте код.

<div class="popbutton" data-window="pop">Показать окно</div>

При клике на этот блок будет всплывать окошко с айди «pop». Как Вы наверно уже догадались, настроить какое окно показывать можно с помощью свойства

data-window="pop"

где

pop — это айди окна

Что бы добавить несколько кнопок, достаточно добавить аналогичный код и изменить значение data-window. Важно, что бы использовался именно класс popbutton.

Шаг 2 Добавляем всплывающее окно

Найдите тег </body>.

В DLE он находится в самом низу шаблона main.tpl, а в WP в шаблоне footer.php

Затем вставьте такой код

<div class="popwindow" id="pop">Содержание окна</div>

Что бы задать высоту, ширину и заголовок окна необходимо задать свойства

data-width="400"

Ширина в px

data-height="200"

Высота в px

data-title="Заголовок окна"

Текст в заголовке окна

В итоге у Вас получится вот так

<div class="popwindow"  data-width="400" data-height="200" data-title="Заголовок окна">Содержание окна</div>

Нет необходимости задавать все свойства.

После настроек  задайте ID окошка. Оно должно совпадать с свойством data-window которое Вы задали для кнопки.

В итоге у Вас получится вот так

<div class="popwindow" id="pop" data-width="400" data-height="200" data-title="Заголовок окна">Содержание окна</div>

Создадим окно всплывающее через заданное время после открытия страницы

Шаг 1 Вставка кода окна

Найдите тег </body>.

В DLE он находится в самом низу шаблона main.tpl, а в WP в шаблоне footer.php

Затем вставьте такой код

<div class="popwindow" data-width="400" data-time="518" data-height="200" data-title="Заголовок окна">Содержание окна</div>

У нас появилось новое свойство data-time и исчез ID окошка так как оно появляется само. Если надо, что бы окно появлялось и при клике и через время то просто добавьте к окошку ID.

В свойстве data-time необходимо указать время в сек через которое должно появится окно.

В моем примере окошко появится через 518 секунд после открытия страницы.

Создадим окно всплывающее при первичном посещении страницы

Шаг 1 Вставка кода окна

Найдите тег </body>.

В DLE он находится в самом низу шаблона main.tpl, а в WP в шаблоне footer.php

Затем вставьте такой код

<div class="popwindow" data-width="400" data-time="518" data-oneshow="yes" data-height="200" data-title="Заголовок окна">Содержание окна</div>

В итоге получилось окошко которое появится через 518 секунд только когда посетитель зашел первый раз на сайт.

Как зафиксировать блок при прокрутке страницы с определенного места

Иногда надо зафиксировать блок когда этот блок уже почти исчез за пределами видимой области.

Шаг 1 Узнаем код нужного блока с помощью инструмента для веб-мастера

Вы получите код вида:

<div class="popwindow">
 контент
</div>

Что бы зафиксировать его при прокрутке, задайте ему класс «toppanel» . Получится вот так:

<div class="popwindow toppanel">
 контент
</div>

Блок зафиксируется когда расстояние между и верхом страницы и его началом будет равно 0.

Что бы задать свое расстояние до верха страницы, надо добавить свойство data-top и указать цифру в px.

Получится вот так

<div class="popwindow toppanel" data-top="20">
 контент
</div>
Понравилась статья? Ставь лайк.

Похожие материалы

Обсуждения

Оставьте свой Email И мы обсудим Вашу идею
*P.S.:Не работаю с бюджетами менее чем 600$