WordPress как на ладони
wordpress jino

ThickBox API: модальное окно в админке

В WordPress есть такая штука как ThickBox - это API для создания модальных окон в админке. Такое окно, например, можно видеть при нажатии на кнопку «Детали» на странице плагинов. Пользоваться очень просто и как обычно, настройки довольно гибки.

API основан на библиотеке ThickBox jQuery, автором которой является Cody Lindley, однако код был переписан специально для WP.

ThickBox хорошо подойдет для тем и плагинов, так как в случае изменений при очередном обновлении WP, модальные окна будут по прежнему работать и не надо переживать о поддержке и обратной совместимости.

До версии 3.5 на базе ThickBox работало модальное окно медиа библиотеки на странице редактирования записи. Но не смотря на изменения технология ThickBox по прежнему актуальна и рекомендуется разработчикам.

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

Для создания модального окна (thickbox) нужно сделать две вещи:

  1. Подключить скрипт ThickBox в PHP, вызвав функцию add_thickbox().

  2. Добавить в HTML ссылку (тег <a>), которая будет открывать модальное окно. Ссылка должна иметь:
    • Класс thickbox: class="thickbox".
    • В URL (атрибут href) нужно добавить дополнительные параметры запроса.

Параметры модального окна

Параметры запроса, которые добавляются в атрибут href ссылки открывающей модальное окно:

width
Ширина модального окна в пикселях.
height
Высота модального окна в пикселях.
TB_iframe

Указываем этот параметр и ставим ему значение true, если нужно загрузить контент указанной в URL ссылки в iframe. Т.е. URL будет выглядеть так: http://example.com?TB_iframe=true&width=600&height=550. Так контент http://example.com будем показан в модальном окне, в iframe.

В этом случае не нужно создавать сам элемент модального окна в HTML текущей страницы. ВП сделает все автоматом.

TB_inline

При использовании этого параметра вместо TB_iframe модальное окно покажет заранее созданный HTML элемент с id атрибутом указанным в параметре inlineId. Т.е. URL должен выглядеть так: /?TB_inline&inlineId=my_id&width=600&height=550.

В этом случае нужно создать DIV элемент с id=my_id.

<div id="my_id" style="display:none;">
	<p>
	   Контент модального окна
	</p>
</div>

Важно чтобы контент внутри элемента my_id находился внутри другого элемента. Выше это тег <p>.
Так неправильно:

<div id="my_id" style="display:none;">
   Контент модального окна
</div>    

Примеры создания модальных окон

#1 inline модальное окно, контент которого берется из текущей страницы

<?php add_thickbox(); ?>

<div id="my-content-id" style="display:none;">
	 <p>
		  Контент модального окна.
	 </p>
</div>

<a href="/?TB_inline&width=600&height=550&inlineId=my-content-id" class="thickbox">Открыть модальное окно</a>   

#2 iframe модальное окно, контент которого берется по указанному URL

<?php add_thickbox(); ?>

<a href="http://example.com?TB_iframe=true&width=600&height=550" class="thickbox">Открыть модальное окно</a>    

В результате получим такое модальное окно

Заметки

JS код находится в файле

/wp-includes/js/thickbox/thickbox.js

HTML код который создается автоматически

<div id='TB_title'>
	<div id='TB_ajaxWindowTitle'>Заголовок</div>
	<div id='TB_closeAjaxWindow'>
		<button type='button' id='TB_closeWindowButton'><span class='tb-close-icon'></span></button>
	</div>
</div>

<div id='TB_ajaxContent'></div>

Триггером модального окна может быть

HTML тег: <a>, <area> и <input>. Для инициализации каждый тег должен иметь class="thickbox".

Для <a> URL и параметры указываются в атрибуте href. Для <area> и <input> в атрибуте alt.

Заголовок модального окна

Можно указать в атрибутах title или name элемента открывающего окно (триггера).

JS события

// удалено
jQuery( 'body' ).trigger( 'thickbox:removed' );

// загружено
jQuery("#TB_window").trigger( 'thickbox:iframe:loaded' );
ThickBox API: модальное окно в админке 3 комментария
  • Хорошего настроения!

    Заметил некоторую особенность вывода модального окна.
    Фильтрация некоторых тегов.
    Сколько я ни пытался вложить поля, которые там вывожу, в форму с индивидуальным идентификатором, так и не удалось.
    Тег просто исчезает. Всё, что внутри - остаётся.

    Ответить4 месяца назад #
  • И ещё не могу разобраться почему размер модального окна не соответствует вызываемым параметрам.
    Несмотря на то, что явно указаны цифры в ссылке:

    мой сайт/edit.php?paged=3#TB_inline?width=300&height=550&inlineId=admin-modal-attr-12277

    в коде страницы модальное окно имеет другие размеры:

    <div id="TB_window" class="thickbox-loading" style="margin-left: -315px; width: 630px; margin-top: -295px; visibility: visible;">
    Ответить4 месяца назад #
    • Kama4659

      Вот тут это объясняется. Проблема с ? в запросе. Надо вызывать так:

      /?TB_inline&width=300&height=550&inlineId=admin-modal-attr-12277

      Поправил в статье, спасибо!

      Ответить3 дня назад #

Здравствуйте, !

Ваш комментарий