Главная › Новости

Drupal 7. CTools. Большое руководство по созданию всплывающих окон.

Опубликовано: 24.09.2017

Создание попап (всплывающих окон) с помощью модуля CTools не такая сложная вещь, но оно имеет много важных нюансов. Поэтому, эта статья посвящена различным нюансам создания всплывающих окон.

Самое простое CTools всплывающее окно

Что бы создать самое простое CTools всплывающее окно, Вам всего лишь нужно написать одну строку Javascript кода: Drupal.CTools.Modal.show(); . Эта Javascript функция создаст полноценное всплывающее окно, Вам нужно просто добавить контент. Например, давайте создадим попап окно, которое будет появляться после загрузки страницы.

;(function($) { Drupal.behaviors.firstPopup = { attach: function (context, settings) { var content = 'my content'; var title = 'my title'; Drupal.CTools.Modal.show(); $('#modal-title').html(title); // Добавляем заголовок во всплывающее окно; $('#modal-content').html(content); // Добавляем контент во всплывающее окно; } } })(jQuery);

Добавьте этот код на желаемую страницу - и Ваше первое, самое простое всплывающее окно готово. Однако, рассмотренный пример имеет один недостаток - как и любой другой Javascript, он может выводить только данные, сгенерированные на клиентской стороне. Конечно, в некоторых случаях, этого может быть достаточно, но чаще всего во всплывающих окнах отображаются динамические данные с сервера.

Итак, давайте рассмотрим более комплексные, но и более распространенные случаи создания и использования всплывающих окон.

Классическое CTools всплывающее окно

Во-первых, давайте создадим новый модуль под названием my_popup , где мы будем проводить наши эксперименты.

1. hook_menu

Давайте начнем с создания необходимых страниц, через которые наше модальное окно будет вызываться.

/** * Implements hook_menu(). */ function my_popup_menu() { // Страница всплывающего окна. $items['first-popup/%ctools_js'] = array( 'title' => 'My first popup', 'page arguments' => array(1), 'access callback' => TRUE, 'page callback' => 'my_popup_callback', 'type' => MENU_CALLBACK, ); // Страница для вывода ссылки на всплывающее окно. $items['first-popup'] = array( 'title' => 'My first popup', 'access callback' => TRUE, 'page callback' => 'my_popup_page', 'type' => MENU_CALLBACK, ); return $items; }

Мы создали две страницы.