Modalbox — создаем диалоговые окна

Раздел: Programming / Ajax @ 31.03.2008 | Ключевые слова: Modalbox prototype web 2.0

Автор: bO_oblik
Источник: habrahabr

Modalbox — библиотека на prototype и script.aculo.us для создания диалоговых окон и мастеров, обьем ее кода всего 10кб. На мой взгляд это настоящий атрибут веб два нольности.


Modalbox работает в IE6, IE7, Firefox 1.0, 1.5, 2.0, Safari, Camino, Opera 8 и 9.

Вот так выглядит окно мастера созданного с помощью modalbox:

Установка

1. Скачайте ModalBox и распакуйте его в папку, например в /includes(у вас уже должны быть prototype + script.aculo.us библиотеки, так как они нужны для работы Modalbox.)
   
2. Подключите все необходимые библиотеки, вставив код указанный ниже между тегами head:
   

   <script type="text/javascript" src="includes/prototype.js"></script>
   
   
   <script type="text/javascript" src="includes/scriptaculous.js? ¬
   
   
       load=effects"></script>
   
   
   <script type="text/javascript" src="includes/modalbox.js"></script>

   
   
   
3. Подключите CSS файл оформления — «modalbox.css», так же вставив код между тегами head:
   

   <link rel="stylesheet" href="includes/modalbox.css" type="text/css"
   
   
   media="screen" />
    

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

<a href="frame_send-link.html" title="Simple form" onclick="


<strong>Modalbox.show(this.href, {title: this.title, width: 600}); return false;</strong>


"> Send link to a friend</a>

Этот пример откроет страницу «frame_send-link.html» как блок Modalbox`а шириной 600px без перезагрузки страницы.

Скачать библиотеку «ModalBox»

Посмотреть еще кучу «живых» примеров

Источник: «Чернев.Ру» — Позитивный блог

Это интересно:

SimpleModal — простые модальные окна

Распечатать статью