Всплывающее модальное окно с задержкой

Многим наверняка на сайтах попадаются многочисленные назойливые всплывающие окна, предлагающие зарегистрироваться на сайте, подписаться на какую-нибудь фигню или же просто окошки с какой-либо совершенно бесполезной информацией. Меня подобные окна, выскакивающие как чертик из табакерки, очень сильно раздражают. И даже часто хочется закрыть сайт, на котором оно появилось, и больше его вообще не посещать. Но иногда приходиться самому такие окошки делать, а тут уже нравиться - не нравиться, а делать надо.

В этой статье рассмотрим всплывающее окно с формой(в данном случае для примера возьмем стандартную контактную форму). Если выводить форму, то желательно использовать Ctools Modal Form API. При использовании Ctools валидация полей формы и предупреждения об обязательности заполнения полей будут выводиться в том же модальном окне. Выводить окно будем не сразу, а с некоторой задержкой. И после вывода модального окна будем "запоминать" в куку о показе и в дальнейшем не выводить его больше.

Рассмотрим пошагово создание модуля:

Шаг 1. Для начала имплементируем hook_menu и создадим урл, к которому будем обращаться аяксом:


/**
 * Implements hook_menu().
 */
function MYMODULE_menu() {
  $items = array();
  $items['demo/%ctools_js/contact'] = array(
    'title' => 'Contact',
    'page callback' => 'demo_contact_page_callback',
    'page arguments' => array(1),
    'access callback' => TRUE, // Даем доступ естественно всем
    'delivery callback' => 'ajax_deliver',
    'theme callback' => 'ajax_base_page_theme',
  );
  return $items;
}

Шаг 2. Далее формируем page callback-функцию:


function demo_contact_page_callback($js = NULL) {

  $form_state = array(
    'title' => t('Contact'), // Задаем заголовок модального окна.
    'ajax' => TRUE,
    'build_info' => array(
      'args' => array(),
    ),
  );
  form_load_include($form_state, 'inc', 'contact', 'contact.pages');

  $commands = array();
  $commands = ctools_modal_form_wrapper('contact_site_form', $form_state);

  // Если форма была валидирована и отправлена, то выводим сообщение и закрываем модальное окно.
  if (!empty($form_state['executed'])) {
    $commands = array();
    // Закрываем модальное окно.
    $commands[] = ctools_modal_command_dismiss();
    // Выводим сообщение в указанный враппер.
    $commands[] = ajax_command_html('#messages-wrapper', theme('status_messages'));
  }
  return array('#type' => 'ajax', '#commands' => $commands);
}

Шаг 3. Подключаем все необходимые компоненты в hook_init():


function MYMODULE_init() {
  // Подключаем Jquery Cookie плагин из состава ядра друпала
  drupal_add_library('system', 'jquery.cookie');
  // Подключаем свой кастомный скрипт.
  drupal_add_js(drupal_get_path('module', 'test') .'/script.js', 'file');
  ctools_include('ajax');
  ctools_include('modal');
  ctools_modal_add_js();
}

Шаг 4. Описываем script.js файл, который собственно и заставит это все работать так, как нужно:


/**
 * @file
 * Display the popup with delay
 */
(function($) {

  Drupal.ajax.prototype.modalWindow = function() {
    var ajax = this;
    if (ajax.ajaxing) {
      return false;
    }
    try {
      $.ajax(ajax.options);
    }
    catch (err) {
      alert('An error occurred while attempting to process ' + ajax.options.url);
      return false;
    }
    return false;
  };

  Drupal.behaviors.mymodule = {
    attach : function(context) {
      // Проверяем значение куки
      if ( $.cookie('displayed') != 1) {
        // Добавляем ссылку-триггер для вызова окна
        $("body").once().append("<a href='/demo/nojs/contact' class='ctools-use-modal'>");
        
        function show_window() {
          Drupal.ajax[$('a.ctools-use-modal').attr('href')].modalWindow();
          $('a.ctools-use-modal').each(function() {
            $(this).replaceWith('');
          });
        }
        // Устанавливаем значение куки в 1
       // В данном случае кука истечет через 7 дней
        $.cookie('displayed', 1, { expires: 7 });
        // Вызываем функцию show_window с задержкой 5 секунд
        setTimeout(show_window, 5000);
      }
    }
  };
})(jQuery);

Ну вот собственно и все. Осталось только это все оформить в виде модуля и главное не забыть про модуль ctools. Теперь каждый новый посетитель сайта будет видеть назойливое всплывающее окно с формой при первом своем заходе на сайт. При дальнейших его переходах окно уже всплывать не будет.