jQuery Alert Dialogs — замена стандартным функциям Alert(), Confirm() и Prompt()

Original author: Cory S.N. LaViska
  • Translation
image
Плагин jQuery Alert Dialogs призван заменить основную функциональность стандартных предупреждений JavaScript, alert(), confirm(), и prompt() функций. Они полностью настраиваются с помощью CSS (это позволит выглядеть вашему сайту гораздо более привлекательно). И вы также можете настроить пользовательский заголовок для каждого диалогового окна.

Эти методы моделируют обычные модальные диалоговые окна. Они автоматически изменяют свое положение при изменении окна браузера. Если включить jQuery UI Draggable плагин, то окна можно перемещать, перетаскивая их за заголовки. В отличие от стандартных JavaScript функций, вы можете использовать HTML в сообщении. Например, чтобы задать переход на новую строку, вы можете использовать либо \n, либо < br / >.

Для работы плагина необходимы следующие скрипты:





< link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />


Вызываются функции следующим образом:

* jAlert(message, [title, callback])
* jConfirm(message, [title, callback])
* jPrompt(message, [value, title, callback])


Пример кода:

  1. <script type="text/javascript">
  2. $(document).ready( function() {
  3. $("#alert_button").click( function() {
  4. jAlert('This is a custom alert box', 'Alert Dialog');
  5. });
  6. $("#confirm_button").click( function() {
  7. jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
  8. jAlert('Confirmed: ' + r, 'Confirmation Results');
  9. });
  10. });
  11. $("#prompt_button").click( function() {
  12. jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
  13. if( r ) alert('You entered ' + r);
  14. });
  15. });
  16. $("#alert_button_with_html").click( function() {
  17. jAlert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!');
  18. });
  19. $(".alert_style_example").click( function() {
  20. $.alerts.dialogClass = $(this).attr('id'); // set custom style class
  21. jAlert('This is the custom class called &ldquo;style_1&rdquo;', 'Custom Styles', function() {
  22. $.alerts.dialogClass = null; // reset to default
  23. });
  24. });
  25. });
  26. </script>
* This source code was highlighted with Source Code Highlighter.


Недостатки:
* Клавиши ENTER и ESC (подтвердить/отменить) не работают в WebKit-браузерах
* Draggable plugin на данный момент не работает в Opera
* В IE6 position: fixed не поддерживается.


Демонстрация.
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 46

    +2
    И во что вылезает в опере
    JavaScript — webmasters.by/images/articles/jquery.alerts/index.html
    Event thread: mousemove
    Error:
    name: Error
    message: WRONG_ARGUMENTS_ERR
    stacktrace: n/a; see 'opera:config#UserPrefs|Exceptions Have Stacktrace'
    при попытке потаскать окна за заголовок
      +1
      мда, действительно в Опере перетаскивание не работает, правда ошибок у меня никаких не выскакивало, просто окно не перетаскивается. :((
        0
        тоесть получается это просто слой, который появляется при каком-то эвенте и его можно перетаскивать? да как-то это всё мелочно, чтоли…
        0
        это проблема в этом плагине docs.jquery.com/UI/Draggable
        он действительно в Опере не работает :(
          0
          Использую в своих проектах данный плагин — никаких проблем с Оперой нет.
          0
          Это можно исправить:
            +2
            Ищем в jQuery строку:

            var computedStyle = defaultView.getComputedStyle( elem, null );

            и заменяем на:

            if(elem.nodeType == 1)
            {
              var computedStyle = defaultView.getComputedStyle( elem, null );
            }
            
          0
          Интересно, спасибо!
          • UFO just landed and posted this here
              0
              обоснуйте
              • UFO just landed and posted this here
                  0
                  ну отчасти вы правы, я сам не люблю разные появляющиеся окошки на сайтах, но если они они все же есть и владелец сайта по каким-либо причинам не хочет от них отказываться, то почему бы и не настроить их «под себя».
                    –2
                    в электронном магазине.
                    • UFO just landed and posted this here
                        –1
                        Большинству покупателей пока не ткнешь в лицо надпись «ВАШ ТОВАР ЗАКАЗАН И ПЕРЕДАН НА ОБРАБОТКУ» паникует (не скажу, что не оправдано). Окошки — идеальное средство. Кроме того, окошки служат своеобразным окончанием процесса заказа.
                        • UFO just landed and posted this here
                            –2
                            пример нормальный. Странна реакция. На мой взгляд, определенный практикой, это привносит геморрой как оператор (я тут у вас заказал, но не знаю, доставят ли). Еще раз: речь не про то, как лучше, а про то, как больше принесет денег. Это трудно понять, но надо постараться.
                            Еще раз: это выгоднее в плана сокращения работы оператора.
                              +1
                              Это идиотизм какой-то, хотя интересно было прочесть о таких «привычках» пользователей. Мне например не нравится ни один из видов модальных окон в бразуере, он блокирует переключение вкладок например, и вообще плохо.

                              p.s. А тупо нарисовать на последней странице окно не прокатило бы?
                                0
                                Идиотизм-не идиотизм, но с небольшим окном количество звонков оператору с целью убедиться, что заказ принят значительно меньше (при сохранении количества заказов). Так что «удобно» вам не значит приносит деньги. :)
                                • UFO just landed and posted this here
                                    0
                                    Ага, конечно. Я честно говоря, даже не знаю, что на это ответить.
                                0
                                > Еще раз: речь не про то, как лучше, а про то, как больше принесет денег.
                                Поддерживаю такую позицию. Хороший результат с технической точки зрения и хороший результат с точки зрения бизнеса лежат в разных плоскостях. Я сам до сих пор привыкаю к новому мышлению. Кто с этим не сталкивался — вряд ли поймет)
                                • UFO just landed and posted this here
                        +1
                        с алертом полностью согласен, а вот confirm иногда приходится использовать, например для подтверждения удаления.
                          0
                          Я как раз об этом же чуть ниже )))
                          0
                          Ну хорошо, а подтверждение удаления чего-либо как сделать без модального окна? Которое, притом, должно стопить сценарий, пока не согласишься/откажешься.
                          • UFO just landed and posted this here
                              +1
                              Я не об этом. Я о том, что юзер кликает «удалить» — надо переспрашивать. Как это по-вашему сделать лучше? Я считаю, что только confirm() или аналог.

                              Для примера — как это делается в любой почти OS: Вы хотите сохранить файл перед закрытием? Да/Нет.
                      +4
                      Вы забыли доперевести:
                      Known Issues
                      * ENTER and ESC keys (to accept/cancel) don’t work in WebKit browsers
                      * The draggable plugin doesn’t currently work in Opera
                      * IE6 acts a bit differently as position: fixed isn’t supported.

                      В принципе тут всё понятно, но раз уж переводите — переводите до конца, например если бы это было в переводе — вопроса выше по поводу Оперы не возникло бы
                        0
                        спасибо за замечание. сейчас добавлю
                          +1
                          Кстати первые два пункта, имхо, практически перечеркивают возможность использования данного плагина, особенно первый. Отсутствие стандартных реакций на нажатие enter/esc в браузере — это издевательство над пользователями, которые к этому привыкли.

                            0
                            ну это пока Version 1.0, надеюсь в следующих версия эти недостатки будут исправлены
                              0
                              Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/525.19 (KHTML, like Gecko) Chrome/1.0.154.36 Safari/525.19

                              Enter и Space работают, Esc — нет.
                            0
                            Самый главный недостаток confirm'а так и непреодолён — это кнопки OK/Cancel. Желаю в новом году всем разработчикам избавиться от этого мозгового слизня:



                            А украшательства… в принципе я даже придумал от них пользу: если ошибка/сообщение произошло на уровне сайта (а не браузера), то почему бы ему не выглядеть в стиле именно сайта (а не браузера). Так логичнее; и понятнее каково происхождение этого нечта.
                            • UFO just landed and posted this here
                                0
                                А почему не в блоге JQuery. Когда начинаешь искать по этому запросу, сначала в блог идешь. Перенесите, пожалуйста, если не трудно.
                                Карму добавил. :)
                                  0
                                  С точки зрения дизайнера, да, это красивее и позволяет сделать окна в одном стиле с веб страницей.
                                  А вот если рассмотреть это с позиции юзабилити, то все совсем плохо. Дело в том, что пользователь привык что у него окна определенного вида, увидев красивое окошко, но совсем другого вида он залипнет и начнет думать. А думать ему вредно, пользователю надо быстро нажимать на кнопки, смотреть рекламу и покупать товары. К сожалению поведение такого модального окна так же зависит он броузера.
                                  Оптимальным мне кажется разработка сайта без всяких всплывающих окон, требующих внимания пользователя. Пусть сообщения интегрируются в страницу, а не мешают с ней работать.
                                    0
                                    Останавливается ли поток когда мы видим Prompt или Confirm этот?
                                      0
                                      мне кажется именно это и есть «основная функциональность стандартных предупреждений»
                                        0
                                        Дык все предыдущие виденные мною алертозаменители как раз не реализовывали эту «основную функциональность». Поэтому и спрашиваю…
                                    • UFO just landed and posted this here
                                        +1
                                        правильно prompt() поправьте в новости.
                                          0
                                          спасибо, не заметил…
                                          –1
                                          теперь XSS уязвимости станут намного красочнее=)))
                                            0
                                            не достаток это плагина — нет перехвата передачи фокуса нижележищим элментам, через нажатие tab.
                                            и как результат — потенциальная глючность и не запланированое поведение скриптов.
                                              0
                                              При подачи пользователю ОК, а вот для отладки не совсем…

                                              Only users with full accounts can post comments. Log in, please.