The Modal
13 июля 2012
Оформил «правильные модальные окна» в плагин jQuery и выложил на github.
API получился, на мой вкус, неплохим. Можно делать, например, вот такие штуки:
$.modal().open({ onOpen: function(el, options){ $.get('http://example.com/', function(data){ el.html(data); }); } });
На данный момент найдены две нехорошести — одна со скроллом кнопками в FF, вторая — со скроллом на iPad. Со временем, конечно же, они будут исправлены.
Комментарии RSS по email OK
Плагин для бутстрапа бы...
Спасибо за плагин. По-моему, это первый плагин с нормальным скроллом модальных окон. Я использую доработанный jqmodal для этих целей. Интересно решение со скроллом на iPad, так как сам с этим столкнулся.
rmrevin, фиксированные модальки если не ошибаюсь спокойно css подменой можно добиться от бутстрапа.
а плагин хорош) добавил в закладки.
Нажатие средней кнопки (колёсика) с последующим сдвигом мышки прекрасно всю эту красоту скроллит:)
floomby.ru/s1/74by9
Непонятная вещь происходит в chrome, помогло outerline:0px; в .modal. Кстати ещё б z-index добавить бы по умолчанию. Ну это так, для удобства.
спасибо!
rmrevin, есть где-нибудь по этому делу документация?
Владимир, это была неудачная попытка победить скролл стрелками в FF. Убрал. Рамки в Chrome больше не будет.
Давид Мзареулян, красоту = страницу, а не модальное окно? Есть такое дело.
Нажимаем в окошке на крестик - он меняет цвет, далее тянем мышку не отпуская кнопку, отпускаем кнопку. Окно не закрылось, цвет крестика поменян.
rmrevin, в Bootstrap-e есть модальные окошка. Только в Опере почему-то не работают
TranceSmile, для того, чтоб модальное окно от Bootstrap Twitter работало в Opera 12 надо найти
и заменить на
более старые версии браузера я не тестил
Sam, twitter.github.com/bootstrap/javascript.html#modals
Sers, прокручивается что нужно и что нет, скролла два... некрасиво.
Sam, в этом согласен с тобой. Поэтому и заинтересовался твоим вариантом :) буду следить за проектом
Держите решение со скроллом кнопками на FF:
В массиве лежат ключики таких кнопок, как "home", "end", "pgup", "pgdn" и стрелки. Возможно есть ещё какие-нибудь, которые я пропустил. Выяснить их не трудно)
Тестировал в ff 15.0.1, если что. И на вашей версии jquery, которая в демо.
fix:
АльОшка, пробрасывание event-а? Хм, нормально. Может лучше пробрасывать вообще всё?
В смысле вообще все нажатия? А какой смысл? Например, навскидку, может перестать работать закрытие по Esc. Но и это решаемо, просто нужно тестировать. А вот положительные моменты от перехвата всех нажатий навскидку сказать не могу.
Кстати, вместо "keyCode" для определения нажатой клавиши используйте "which" - оно кроссбраузерно (сам не проверял, но раз в документации написано..))
И вместо bind/unbind юзайте on/off - с версии 1.7 bind/live/delegate они deprecated.
p.s. ну и местами ваш код я бы переписал, конечно :-)
АльОшка, форкайте на github, если время будет. Pull-request принимаются.
Самое обидное то, что: - времени нет - с гитхабом никогда не работал)
Если время и можно найти, то боюсь оно всё уйдёт на изучение гитхаба :-)
В любом случае, посмотрю, что-нибудь улучшу и дам вам знать :-)
АльОшка, точно именно этот код работал?
keyup
нужноkeydown
потому как приup
экран уже прокрутился.$('.shim').trigger(e);
всплывёт доbody
и обработчик зациклится. Если не дать ему всплыть, экран не прокрутится.Хм, а ведь и правда зацикливается.. Странно, почему сразу это не выявилось..
Вообще, была где-то статья, с которой я (почти) полностью согласен, о том, что прерывать всплытие категорически нельзя. Конечно, всё зависит от ситуации, но в целом это действительно не допустимо. На разных проектах могут вылезти совершенно не очевидные трудноотловимые глюки со всякими всплывашками и иже с ними. А нам ведь нужен абсолютно универсальный плагин :-)
В любом случае, как выберу время, все эти недоработки доработаем :-) Просто со временем сейчас туговато.
К сожалению, есть серьезный недостаток, что блоки клонируются. jQuery Validation Plugin, например, из-за этого не работает.
Samdark, заметил, что в демке, когда открывается модальник, при нажатии на Try add more content и скроле колесом вниз, почему то окно пропадает. Браузер Chrome 35.0.1916.153 m. Может конечно пропустил. P.S.: Может кто сталкивался
Почему то не срабатывает второй раз, выбраcывает: Uncaught TypeError: undefined is not a function ?
Почему-то кнопка <input type="submit" блокируется в отличии от старого кода. Как исправить?
На самом деле этот код отвратительный. Столько багов и неисправностей, что, пожалуй, верну старый код.
Хотя не такой всё ж как я его представлял. Извините. Просто промучался 11 часов с ним, но сделал! Суперски получилось, кое что пришлось переделать, чуть сыроват, но всё вышло. Вот только не работает <input type="submit" Большое спасибо! С уважением, Вячеслав