Master-X
Форум | Новости | Статьи
Главная » Форум » Программинг, Скрипты, Софт, Сервисы » 
Тема: JQuery модальное окно
цитата
26/09/17 в 13:35
 S_Flash
Подскажите jQuery плагин, реализующий выезжающее на несколько секунд сообщение, которое можно либо самому закрыть, либо дождаться, пока оно само "уйдёт".
цитата
27/09/17 в 06:31
 zhekats
Самый простой и легкий jquerymodal.com
Более продвинутый визуально
labs.voronianski.com/jquery.avgrund.js/


А если уже юзаешь на сайте jQuery UI(не путать с jQuery), то у них в наборе есть такое jqueryui.com/dialog/. Но отдельно подключать эту либу только ради модалки не стоит.
цитата
27/09/17 в 21:33
 S_Flash
zhekats: такие видел. А не встречал такое, чтоб окошко слайдилось сверху, как бы вылазило с верхнего края экрана. Нужно чтоб оно вылезло, поторчало какое-то время и залезло обратно.
цитата
28/09/17 в 00:39
 Oswell E. Spencer
http://docs.toddish.co.uk/popup/demos/ например, а вообще, овер дохуя ...
цитата
28/09/17 в 04:02
 sk://ed
S_Flash: ну так пишется такое элементарно, зачем тебе плагин icon_wink.gif
цитата
28/09/17 в 15:29
 zhekats
S_Flash писал:
zhekats: такие видел. А не встречал такое, чтоб окошко слайдилось сверху, как бы вылазило с верхнего края экрана. Нужно чтоб оно вылезло, поторчало какое-то время и залезло обратно.

Такого не видел, но там и правда 2 строчки в JS.

Стилишь окошко, даешь ему кроме всего прочего:
Код:
.message {
    position: fixed
    top: -30px; /* допустим оно высотой 30 пикселей, спрячется сверху */
    transition: 0.2s ease top; /* для анимации выезжания */
}


Описываем класс открытого попапа:
Код:
.message.opened {
    top: 0;
}


И в JS когда надо показать его, пишем(надо jQuery, на чистом JS c памяти не напишу, если надо - в личку напиши):
Код:
$(".message").addClass("opened");
setTimeout(function() {$(".message").removeClass("opened");}, 3000);

*где 3000 = 3 секунды(время через которое попап пропадет).

Еще можна дописать кучу проверок типа "Не выводить попап если он уже выведен" и т.д.
цитата
29/09/17 в 09:53
 Ailk
https://ned.im/noty/#/
http://www.amaranjs.com/example/007-setting-in-effect-slideright-to…mple-frame

http://codeseven.github.io/toastr/demo.html (в эффектах можно настроить способ показа)
http://alertifyjs.com/
http://izitoast.marcelodolce.com/

и другие им подобные.
цитата
29/09/17 в 11:53
 S_Flash
Ailk: Супер! smail54.gif


Эта страница в полной версии