<rmcreative>

RSS

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

  1. №6441
    rmrevin
    rmrevin 13 июля 2012 г., 19:28:34

    Плагин для бутстрапа бы...

  2. №6442
    Максим
    Максим 13 июля 2012 г., 19:31:13

    Спасибо за плагин. По-моему, это первый плагин с нормальным скроллом модальных окон. Я использую доработанный jqmodal для этих целей. Интересно решение со скроллом на iPad, так как сам с этим столкнулся.

  3. №6443
    Костя
    Костя 13 июля 2012 г., 19:34:09

    rmrevin, фиксированные модальки если не ошибаюсь спокойно css подменой можно добиться от бутстрапа.

    а плагин хорош) добавил в закладки.

  4. №6444
    Давид Мзареулян
    Давид Мзареулян 13 июля 2012 г., 19:46:09

    Нажатие средней кнопки (колёсика) с последующим сдвигом мышки прекрасно всю эту красоту скроллит:)

  5. №6445
    Владимир
    Владимир 13 июля 2012 г., 20:34:57

    floomby.ru/s1/74by9

    Непонятная вещь происходит в chrome, помогло outerline:0px; в .modal. Кстати ещё б z-index добавить бы по умолчанию. Ну это так, для удобства.

  6. №6447
    artcifra
    artcifra 13 июля 2012 г., 23:32:46

    спасибо!

  7. №6448
    Sam
    Sam 15 июля 2012 г., 2:35:31

    rmrevin, есть где-нибудь по этому делу документация?

    Владимир, это была неудачная попытка победить скролл стрелками в FF. Убрал. Рамки в Chrome больше не будет.

    Давид Мзареулян, красоту = страницу, а не модальное окно? Есть такое дело.

  8. №6495
    Илья
    Илья 26 июля 2012 г., 22:17:28

    Нажимаем в окошке на крестик - он меняет цвет, далее тянем мышку не отпуская кнопку, отпускаем кнопку. Окно не закрылось, цвет крестика поменян.

  9. №6498
    TranceSmile
    TranceSmile 28 июля 2012 г., 15:59:26

    rmrevin, в Bootstrap-e есть модальные окошка. Только в Опере почему-то не работают

  10. №6500
    Sers
    Sers 29 июля 2012 г., 20:55:45

    TranceSmile, для того, чтоб модальное окно от Bootstrap Twitter работало в Opera 12 надо найти

    //...
    } else if ( $.browser.opera ) {
        transitionEnd = "oTransitionEnd"
    }
    //...

    и заменить на

    //...
    } else if ( $.browser.opera ) {
        transitionEnd = "otransitionend"
    }
    //...

    более старые версии браузера я не тестил

  11. №6501
    Sers
    Sers 29 июля 2012 г., 21:15:40
  12. №6502
    Sam
    Sam 30 июля 2012 г., 2:40:56

    Sers, прокручивается что нужно и что нет, скролла два... некрасиво.

  13. №6505
    Sers
    Sers 30 июля 2012 г., 20:50:51

    Sam, в этом согласен с тобой. Поэтому и заинтересовался твоим вариантом :) буду следить за проектом

  14. №6660
    АльОшка
    АльОшка 18 сент. 2012 г., 17:38:56

    Держите решение со скроллом кнопками на FF:

    $(document).on('keyup', function(e){
        var keys = [40,38,37,39,36,35,33,34];
        if (
            $.inArray(e.which, keys) > 0 && 
            $('body').hasClass('lock')
        ) {
            e.preventDefault();
            $('.shim').trigger(e);
        }
    });

    В массиве лежат ключики таких кнопок, как "home", "end", "pgup", "pgdn" и стрелки. Возможно есть ещё какие-нибудь, которые я пропустил. Выяснить их не трудно)

    Тестировал в ff 15.0.1, если что. И на вашей версии jquery, которая в демо.

  15. №6661
    АльОшка
    АльОшка 18 сент. 2012 г., 17:40:22

    fix:

    $(document).on('keyup', function(e){
        var keys = [40,38,37,39,36,35,33,34];
        if (
            $.inArray(e.which, keys) >= 0 && 
            $('body').hasClass('lock')
        ) {
            e.preventDefault();
            $('.shim').trigger(e);
        }
    });
  16. №6662
    Sam
    Sam 18 сент. 2012 г., 22:15:23

    АльОшка, пробрасывание event-а? Хм, нормально. Может лучше пробрасывать вообще всё?

  17. №6681
    АльОшка
    АльОшка 19 сент. 2012 г., 10:16:54

    Может лучше пробрасывать вообще всё?

    В смысле вообще все нажатия? А какой смысл? Например, навскидку, может перестать работать закрытие по Esc. Но и это решаемо, просто нужно тестировать. А вот положительные моменты от перехвата всех нажатий навскидку сказать не могу.

    Кстати, вместо "keyCode" для определения нажатой клавиши используйте "which" - оно кроссбраузерно (сам не проверял, но раз в документации написано..))

    И вместо bind/unbind юзайте on/off - с версии 1.7 bind/live/delegate они deprecated.

    p.s. ну и местами ваш код я бы переписал, конечно :-)

  18. №6682
    Sam
    Sam 19 сент. 2012 г., 12:08:44

    АльОшка, форкайте на github, если время будет. Pull-request принимаются.

  19. №6683
    АльОшка
    АльОшка 19 сент. 2012 г., 15:01:01

    АльОшка, форкайте на github, если время будет. Pull-request принимаются.

    Самое обидное то, что: - времени нет - с гитхабом никогда не работал)

    Если время и можно найти, то боюсь оно всё уйдёт на изучение гитхаба :-)

    В любом случае, посмотрю, что-нибудь улучшу и дам вам знать :-)

  20. №6714
    Sam
    Sam 20 сент. 2012 г., 19:23:00

    АльОшка, точно именно этот код работал?

    1. Вместо keyup нужно keydown потому как при up экран уже прокрутился.
    2. Событие $('.shim').trigger(e); всплывёт до body и обработчик зациклится. Если не дать ему всплыть, экран не прокрутится.
  21. №6734
    АльОшка
    АльОшка 24 сент. 2012 г., 17:31:38

    Хм, а ведь и правда зацикливается.. Странно, почему сразу это не выявилось..

    Если не дать ему всплыть...

    Вообще, была где-то статья, с которой я (почти) полностью согласен, о том, что прерывать всплытие категорически нельзя. Конечно, всё зависит от ситуации, но в целом это действительно не допустимо. На разных проектах могут вылезти совершенно не очевидные трудноотловимые глюки со всякими всплывашками и иже с ними. А нам ведь нужен абсолютно универсальный плагин :-)

    В любом случае, как выберу время, все эти недоработки доработаем :-) Просто со временем сейчас туговато.

  22. №7392
    Иннокентий
    Иннокентий 17 янв. 2013 г., 1:21:25
    1. Неприятная особенность. После закрытия модального окна первоначальная прокрутка страницы сбрасывается. Наверное, лучше запоминать состояние прокрутки на момент вызова модального окна, а при его закрытии прокрутку страницы восстанавливать.
    2. Очень хотелось бы, чтобы при небольшой высоте модального окна оно отцентрировалось по вертикали.
  23. №8170
    Сергей
    Сергей 19 июля 2013 г., 13:20:23

    К сожалению, есть серьезный недостаток, что блоки клонируются. jQuery Validation Plugin, например, из-за этого не работает.

  24. №9068
    BrusSENS
    BrusSENS 20 июня 2014 г., 18:30:27

    Samdark, заметил, что в демке, когда открывается модальник, при нажатии на Try add more content и скроле колесом вниз, почему то окно пропадает. Браузер Chrome 35.0.1916.153 m. Может конечно пропустил. P.S.: Может кто сталкивался

    $.modal().open({
                        onOpen: function(el, options){
                            $.get('/user/user/signup', function(data){
                                el.html(data);
                            });
                        }
                    });

    Почему то не срабатывает второй раз, выбраcывает: Uncaught TypeError: undefined is not a function ?

  25. №11079
    Вячеслав
    Вячеслав 16 сент. 2017 г., 9:38:22

    Почему-то кнопка <input type="submit" блокируется в отличии от старого кода. Как исправить?

  26. №11080
    Вячеслав
    Вячеслав 16 сент. 2017 г., 11:51:16

    На самом деле этот код отвратительный. Столько багов и неисправностей, что, пожалуй, верну старый код.

  27. №11081
    Вячеслав
    Вячеслав 16 сент. 2017 г., 13:13:18

    Хотя не такой всё ж как я его представлял. Извините. Просто промучался 11 часов с ним, но сделал! Суперски получилось, кое что пришлось переделать, чуть сыроват, но всё вышло. Вот только не работает <input type="submit" Большое спасибо! С уважением, Вячеслав

  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.