Скрытие overlay при клике на внешней области

Опубликовано 2012.05.05

Замечательный модуль overlay выводит административные страницы сайта в модальном окне,закрвть которое можно просто кликнув на крестик. Немного расширив код этого модуля,а именно шаблон, можно закрывать это модальное окно щелчком вне области этого модального окна. Прямо как lightbox или colorbox. Для реализации потребуется переопределить шаблон overlay.tpl.php. Взять его можно в папке модуля. Копируем его в папку вашей административной темы и добавляем следующую строчку.
  1. <a id="overlay-close-bg" href="#" class="overlay-close"></a>
Эта ссылка и будет кликабельной областью. А также стиль
  1. #overlay-close-bg {
  2. width: 100%;
  3. display: block;
  4. height: 100%;
  5. position: fixed;
  6. top: 0;
  7. left: 0;
  8. cursor:default;
  9. }
В итоге шаблон должен выглядеть вот так:
  1. <?php print render($disable_overlay); ?>
  2. <a id="overlay-close-bg" href="#" class="overlay-close"></a>
  3. <div id="overlay" class='123' <?php print $attributes; ?>>
  4. <div id="overlay-titlebar" class="clearfix">
  5. <div id="overlay-title-wrapper" class="clearfix">
  6. <h1 id="overlay-title"<?php print $title_attributes; ?>><?php print $title; ?></?php></h1>
  7. </div>
  8. <div id="overlay-close-wrapper">
  9. <a id="overlay-close" href="#" class="overlay-close"><span class="element-invisible"><?php print t('Close overlay'); ?></?php></span></a>
  10. </div>
  11. <?php if ($tabs): ?><h2 class="element-invisible"><?php print t('Primary tabs'); ?></?php></h2><ul id="overlay-tabs"><?php print render($tabs); ?></?php></ul><?php endif; ?>
  12. </?php></?php></div>
  13. <div id="overlay-content"<?php print $content_attributes; ?>>
  14. <?php print $page; ?>
  15. </?php></div>
  16. </div>
  17. </?php>
Стиль можете поместить даже на этой странице,или вынести в css файл темы. Кстати,если используется стандартная тема Drupal, в папке themes - то помещенный в неё шаблон не перекроет стандартный шаблон темы. Придётся править шаблон прямо в папке модуля. А если тема в sites/all/themes - то всё будет ок.