23 января 2008 ~ 16 Комментариев

Легкие диалоговые окна

Дизайн

dd 

Хочу поделиться с вами маленьким скриптиком для создания простых всплывающих окон: подсказок, ошибок, да чего угодно.

Скрипт представляет из себя три с половиной килобайт кода. Оформление блоков настраивается с помощью css — так что поставил скрипт и забыл ;-)

Необходимая вещь для минималистов вроде меня, это, вполне реальная, замена громоздким библиотекам.

Использование dialog box

Подключаем сам скрипт и его оформление, вставив следующий код между тегами <head></head>:

<link rel="stylesheet" type="text/css" href="dialog_box.css" />
<script type="text/javascript" src="dialog_box.js"></script>

Окно вызывается при помощи функции showDialog

showDialog('Заголовок','Содержание блока','Имя блока(используется для оформления)')

Пример со ссылкой:

<a href="#" onclick="showDialog('Ошибка','Ошибка и в Африке ошибка :-).','error')">Ошибиться</a>

Используйте на здоровье! ;-)

Посмотреть пример использования

Скачать готовый пример(обновлено 28 апреля)

Исходный текст(английский)

16 Комментариев для “Легкие диалоговые окна”

  1. Soider 23 апреля 2008 at 21:05 Permalink

    Кайф ) Классные =)

    Ответить
  2. Andy 23 апреля 2008 at 22:10 Permalink

    Я дико извиняюсь, но где бы сам скрипт глянуть?

    Ответить
  3. Я собственной персоной 23 апреля 2008 at 22:44 Permalink

    Я дико извиняюсь, но где бы сам скрипт глянуть?

    Вроде же ссылки дал ;-)

    Ответить
  4. Горбунов Олег 24 апреля 2008 at 0:08 Permalink

    Это не диалоговые окна, а информационные. :) Ибо диалога с пользователем они не ведут )))

    Ответить
  5. Zeboton 24 апреля 2008 at 14:59 Permalink

    В примере есть ссылка «Подтвердиться». Но в открывающемся «окне» нет никаких кнопок кроме как закрыть.
    Вопрос.
    Можно ли в отрывающемся «окне» делать кнопки? И если да, то как их потом обрабатывать.

    P.S.
    Скрипт не смотрел, так как нужно срочно уходить.

    Ответить
  6. Я собственной персоной 24 апреля 2008 at 15:29 Permalink

    В примере есть ссылка «Подтвердиться». Но в открывающемся «окне» нет никаких кнопок кроме как закрыть.
    Вопрос.
    Можно ли в отрывающемся «окне» делать кнопки? И если да, то как их потом обрабатывать.

    P.S.
    Скрипт не смотрел, так как нужно срочно уходить.

    Возможно прописывать в тело окна кнопки, и обрабатывать их любым способов будь то javasctipt или просто get-запрос — все зависит от Вашей сообразительности ;-)

    Ответить
  7. Cyprezz 24 апреля 2008 at 17:11 Permalink

    Спасибо боьшое – помог сабж :)
    Фотки при клике удобнее так показывать, чем во всплывающих окнах ;)

    Ответить
  8. Артём Курапов 24 апреля 2008 at 20:21 Permalink

    Мне больше нравятся маленькие как в гугле – не так бросаются в глаза + на них не обязательно реагировать и закрывать

    Ответить
  9. Я собственной персоной 24 апреля 2008 at 20:24 Permalink

    Мне больше нравятся маленькие как в гугле – не так бросаются в глаза + на них не обязательно реагировать и закрывать

    Но иногда надо заставить пользователя обратить на что-то внимание, как бы это ужасно не звучало…

    Ответить
  10. wsr 28 апреля 2008 at 19:12 Permalink

    В IE6 замечен баг с тегом и этими диалоговыми окнами…
    select всегда поверх этого диалогового окна. Это очень удручает… Когда уже этот устаревший браузер умрет… Кто знает как поправить?

    Ответить
  11. Я собственной персоной 28 апреля 2008 at 19:45 Permalink

    В IE6 замечен баг с тегом и этими диалоговыми окнами…
    select всегда поверх этого диалогового окна. Это очень удручает… Когда уже этот устаревший браузер умрет… Кто знает как поправить?

    Автор обновил скрипт, попробуйте скачать новую версию.
    Возможно там проблема уже решена, ссылку в посте поправил.

    Ответить
  12. wsr 29 апреля 2008 at 16:47 Permalink

    Решение было принято отнюдь не однозначное.
    В конец body добавлялся прозрачный iframe покрывающий всю видимую область контента и скрывающий select с глаз долой. Ну IE6 и прико-о-ол :)

    Решение найдено в исходниках ThickBox 3.1 (http://jquery.com/demo/thickbox/) ;-)

    Ответить
  13. Я собственной персоной 29 апреля 2008 at 18:18 Permalink

    wsr, спасибо что отписались, думаю многие читатели будут благодарны Вам за эту наводку ;-)

    Ответить
  14. kydapodatsya 20 августа 2008 at 8:32 Permalink

    вот если бы еще перетаскивать их можно было

    Ответить
  15. Александр 2 октября 2009 at 17:49 Permalink

    И «Легкие диалоговые окна» плавно превратились в Ajax :)

    Ответить

Оставить комментарий