А какие плагины модальных окон используете вы?

Question

[Андрей Саврасов]

Поделитесь какие плагины модальных окон используете вы?
Требования:
1) кросбраузерность до IE 9 (включительно, хотя бы просто чтобы работало)
2) поддержка на мобильных устройствах
3) Не стандартная анимация

Answer 1

[A K]

Саморез Самопис

Comments

[Андрей Саврасов]

Symphony я тоже пишу сам, есть ли у вас какая-нибудь наработка отвечающая параметрам которые я описал выше?

[A K]

Андрей Саврасов: каждый раз пишу с нуля под проект

Answer 2

[Дмитрий Муштат]

До момента, когда не умел писать сам - использовал плагин Fancybox.

Сейчас для всех нестандартных анимаций, в том числе и для модальных окон использую Greensock Animation Platform. Ооочень гибкая платформа для работы с анимациями. Вот пример простого модального окна: jsfiddle.net/y6snnwua

Comments

[Андрей Саврасов]

Отличный вариант с Greensock Animation Platform спасибо за наводку

Answer 3

[Тимофей]

1) Не поддерживает из необходимого, пожалуй, только css-анимациию. Ну и обойдутся без нее, нехер на старых браузерах сидеть)
2) CSS + media queries по необходимости.
3) Что значит нестандартная?

А так

<a href="#modal1" class="show-modal">Открыть модальное окно</a>
<div class="modal" id="modal1">бла-бла-бла</div>

+

$('.show-modal').click(function(e) { e.preventDefult(); $($(this).attr('href')).toggleClass('show'); } );

+

.modal {
    transition: ...;
    position: fixed;
    top: -9999px;
    left: -9999px;
    ...
}
.modal.show {
    top: 50%;
    left: 50%;
    ...
}

И для чего тут нужен плагин?

Comments

[Андрей Саврасов]

Задача стоит в создании кросбраузерного модального окна (именно с поддержкой до ие 9), которое будет не просто появляться и исчезать, а скажем вылетать или изгибаться. Также необходимо иметь возможность быстра его настраивать. Т.е. использовать на большом количестве проектов с затратой на настройку не больше 5 минут каждого.

[Тимофей]

Ну все равно же на каждом проекте индивидуальный дизайн, что не дает возможности все настраивать за 5 минут в любом случае. Поддержка IE без анимации вполне возможна, тут все зависит от css для модального окна. С анимацией для IE - да, придется заменять ее на вызовы jQuery.animate. Для вылета и изгибания (и еще много для чего) вполне хватит средств css. С помощью 2-х свойств, transform и opacity, можно просто чудеса творить, хватило бы фантазии. Да и фантазии в принципе у многих до нас уже хватило, в гугле примеров огромное количество можно найти. Единственное, чего тут можно добавить - подгрузку с ajax, но это еще 2 строчки добавить в js и все.

[Sergeniy]

Тимофей:

Главное ВРЕМЯ ВНЕДРЕНИЯ, а не то, чтобы потешить свое ЧСВ и написать все в ручную!

[Тимофей]

Sergeniy: Так, и насколько меньше времени у тебя займет использование стороннего плагина в случае с индивидуальным дизайном сайта? Я не говорю про админки, прототипы и т.п., где, понятное дело, просто берешь какой-нибудь бутстрап и не заморачиваешься, а именно про случай с индивидуальным дизайном.

[Sergeniy]

Тимофей:
Мне, как минимум, не придется кодить:
- закрытие по Esc
- переключение по кнопкам вперед/назад
- адаптивку под ширину и высоту
- и т.д.
и проверять все это во всех браузерах.
Спасибо, настрадались.

[Тимофей]

Sergeniy:
Не придется кодить. Кодить != потратить больше времени. Настраивать плагин и его стили, кстати, тоже так или иначе в коде придется.
Esc. Еще немного кода 1 раз, использование его же в дальнейшем. В итоге время скорее всего сэкономишь.
Вперед-назад. Аналогично.
Адаптивность. Не самая сложная задача, согласись :) Тут даже без media queries легко обойтись - делаешь overflow: auto + max-width и дело в шляпе.
Все браузеры. При использовании jQuery проблем с браузером не будет, а используют его чуть менее, чем все. Стили тоже не вызывают проблем для IE >= 9 (а на 8 лично я уже начал забивать).
Страдания. Не знаю, я не страдал.

[Sergeniy]

Тимофей:
"Кодить != потратить больше времени". Да что ты говоришь!?
Пока ты будешь менять половину рукописного кода из-за нестандартной фишки, все это тестить, затем стилизовать и снова тестить, я загуглю готовый плагин, стилизую и пойду смотреть новые серии сериала.

Нахрена изобретать велосипед, когда более матерые прогмеры все сделали за меня (и js и css)?

[Тимофей]

Sergeniy: Не менять, а 1 раз написать и использовать где угодно. Так, чтобы все работало (это возможно, да). А стили, к сожалению, придется менять под каждый проект и для плагина, и для своего решения. И я не говорю, что готовые модули использовать нельзя. Можно. Но тебе нужно потратить время на то, чтобы плагин подключить и разобраться в нем. Столько же или меньше времени лично у меня уходит на велосипед. Поэтому я выбираю велосипед.

Answer 4

[jlekapb]

Мне the modal нравится.
Он фиксирует фон, чтобы сайт не прокручивался, когда открыто модальное окно, в том же fancybox из коробки такого нет.
Еще можно навесить события на открытие/закрытие окна.

Comments

[Sergeniy]

{
overlay : {
locked : true // if true, the content will be locked into overlay
}
}

[jlekapb]

Sergeniy: вы про фансибокс?