IP.Board:Всплывающее окно

Материал из CSI

[править] IP.Board 3

Всплывающее окно

Модальное окно позволяет выводить различную информацию во всплывающем окне. IPB 3 использует модальные окна, например, при быстром отображении информации о пользователе в теме, или предпросмотр темы. Создать модальное окно довольно просто. Особых знаний не требуется.

Модальное окно содержит следующие параметры:

• type — тип окна. Допускаются два типа: pane (отдельное окно) или ballon (всплывающая подсказка)
• modal — поведение окна. Допускаются два условия: false или true. Если установлено true, то модальное окно закроется при клике на любом участке основного окна браузера. false — только на кнопке закрытия самого модального окна.
• w — ширина модального окна.
• h — высота модального окна.
• initial — инициализация блока информации для отображения. Это может быть таблица или DIV.
• hideAtStart — скрыть модальное окно при его создании.
• close — селектор для закрытия модального окна. Можно сразу использовать значение a[rel="close"].
• classname — название класса, которое будет добавлено в оболочку модального окна.
• ajaxURL — ссылка на информацию, которая будет подгружена при помощи AJAX
• delay — по умолчанию { show: 0, hide: 0 }. Количество микросекунд задержки перед отображением модального окна.

Итак, с параметрами разобрались. Теперь можно попробовать создать своё небольшое всплывающее окошко. Для начала необходим элемент, который будет приводить наш маленький механизм в движение. Пусть это будет ссылка, например, такая:

<a href='#' id='csoShowPopup'>А что у нас внутри?</a>

Отлично! Ссылка есть. Теперь нужно, собственно, сама информация, которая будет у нас отображаться в модальном окне. Сделаем небольшую конструкцию из DIV-ов:

<div id='csoPopup' style='display:none;'>
        <h3>А что у нас внутри?</h3>
        <div>
                Опа! :)
        </div>
</div>

Ну вот. Пришло время сделать сам механизм, который будет поднимать наше окошко вверх. Вот небольшой пример такого механизма:

<script type='text/javascript'>
//<![CDATA[
showPopup = function(e) {
        Event.stop(e);
        popup = new ipb.Popup( 'csoPopup', { type: 'pane', modal: false, w: '500px', h: '500px', initial: $('csoPopup').innerHTML, hideAtStart: false, close: 'a[rel="close"]' } );
        return false;
}
 
if( $('csoShowPopup') ) {
        $('csoShowPopup').observe('click', showPopup);
}
//]]>
</script>

Вставьте его в свой шаблон и приступайте к созданию модального окна по своему желанию.

[править] Ссылки

Модальное окно