WordPress как на ладони
Наставник Трепачёв Д.П., phphtml.net wordpress jino

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

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

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

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

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

Использование 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 элемента открывающего окно (триггера).

ThickBox API: модальное окно в админке 2 комментария
  • Хорошего настроения!

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

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

    мой сайт/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;">
    Ответить24 дня назад #

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

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