Ajax Russia : Аякс по-русски

Свежие новости из мира IT

ModalBox - модальные диалоги на джаваскрипте

September 24th, 2007 | Category: Javascript, Prototype, Web20, Дизайн | Автор: Александр

Поднимите руку, кто терпеть не может функцию alert(). Я отучился от этой заразы после того, как начал использовать firebug. В этом плагине есть замечательная функция:

PLAIN TEXT
JavaScript:
  1. console.log(some_variable);

которая выдаст нужную переменную на консоль. Кто ещё использует alert для отладки своих скриптов - милости прошу на эту страницу.

Но alert не всегда используется для отладки сайтов. Вместе с функцией confirm, его используют для донесения какой нибудь важной информации до посетителя. Информации настолько важной, что это окно с информацией должно быть модальным. Я ничего не имею против модальных диалогов, но alert или confirm считаю старомодными. Никак такие окошки не увязываются с современными дизайнами сайтов.

Поэтому сегодня я покажу вам, как сделать обалденный модальный диалог с помощью ModalBox. Полный комплект можно скачать по этому адресу.

  1. Установка

    Подгружаем джавасктипт и CSS

    PLAIN TEXT
    HTML:
    1. <script type="text/javascript" src="includes/prototype.js"></script>
    2. <script type="text/javascript" src="includes/scriptaculous.js?load=builder,effects"></script>
    3. <script type="text/javascript" src="includes/modalbox.js"></script>
    4. <link rel="stylesheet" href="includes/modalbox.css" type="text/css" media="screen" />

  2. Использование

    Как параметр к ModalBox можно дать ссылку на другую HTML страницу, или id DOM элемента

    PLAIN TEXT
    JavaScript:
    1. // откроет message.html в модальном окне
    2. Modalbox.show("/message.html", {title: this.title, width: 600});
    3.  
    4. // покажет содержимое элемента с id="message" в модальном окне
    5. Modalbox.show($('message'), {title: this.title, width: 300});

Про другие параметры и примеры использования можно почитать на страничке Андрея Оконечникова.
Напоследок предлагаю потестировать модальный диалог, нажав на эту ссылку:

ModalBox Demo

del.icio.us Забобрить!

15 Comments so far

  1. xman September 24th, 2007 13:08

    превед,

    прикольная штука… крассиво выглядит :о)

  2. LeKz September 27th, 2007 23:59

    Безусловно, alert и confirm не вписываются не в один дизайн современного сайта. Красивое альтернатива была предложена разработчиками Facebook.com.

  3. Aleksandr September 28th, 2007 00:04

    Можно по подробнее? Что за альтернатива?

  4. Думаю September 29th, 2007 02:30

    лучшие диалоги на EXT - на своё блоге я их разживал - http://www.dumay.name/Ext/dialogs.html

  5. Думаю September 29th, 2007 02:31

    PS все алерт вписываются в дизайн так как алерт подстраивается не под дизайн сайта а под дизайн браузера-виндовса то есть не прогодаешь

  6. gerasim November 24th, 2007 13:23

    Добрый день. Решил использовать модальные окна. В фаерфоксе все ок, в осле картинки не отображаются. может фикс какой есть. Чую что дело в ксс, никак поймать не могу что не так.

  7. н January 25th, 2008 12:45

    цн

  8. Сергей February 26th, 2008 15:30

    Привет.

    Есть желание использовать библиотеку MODALBOX 1.6.0, чтобы подменять стандартные модальные окна методов JavaScript CONFIRM, PROMPT, ALERT.
    Подскажите, как сделать так, чтобы вызовы названных методов (где-то на сайте) подменялись вызовом более красивых модальных окошек из MODALBOX?
    Есть ли здесь стандартный приём?

    Я попробовал вставить в html-шаблон веб-странички текст с указанием на библиотеки и css-файл:

    А в методе
    Modalbox.Methods = {
    overrideAlert: true,…

    “true” поменял на “false”.

    При возникновении ALERT (а оно генерится динамически, кусок html-кода типа:
    …
    window.setTimeout(”alert(’Во введенном логине или пароле ошибка!’)”,10);
    …
    ) что-то моргает, но окошко ALERT не появляется. ;(
    Внизу окна броузера IE7 выдаётся сообщение
    Строка: 56
    Симвоол:3
    Ошибка: Объект не поддерживает это свойство или метод

  9. Сергей February 26th, 2008 15:32

    Библиотеки отрезаются. Фильтр неправильно работает, видимо.
    Ещё раз:

  10. Сергей February 26th, 2008 15:33

    Библиотеки по образцу на страничке: http://www.ajaxrussia.com/index.php?s=modalbox

  11. Aleksandr February 27th, 2008 02:38

    попробуй переписать функцию alert

  12. Толя May 15th, 2008 15:49

    в IE у меня вообще не работает

  13. Толя May 15th, 2008 16:41

    все разобрался :)

    у меня были линки:
    Контакт

    в этом случае в IE не запускается modal box
    а тупо переходит на страницу contact.php

    если немного изменить:
    Контакт

    то в IE все работает нормально

  14. Толя May 15th, 2008 16:44

    где кнопочка править сообщение? :)

    было
    a href=”contact.php” title=”Контакты” onclick=”Modalbox.show(this.href, {title: this.title}); return false;”

    стало
    a href=”#” title=”Контакты” onclick=”Modalbox.show(’contact.php’, {title: this.title}); return false;”

  15. Толя2 September 18th, 2008 14:32

    в IE все нормально работает?

Leave a reply