1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Отключить скролл страницы при открытии при открытии модального окна Colorbox

Главные вкладки

Аватар пользователя Tinnka Tinnka 29 марта 2018 в 11:44

Доброго дня уважаемые коллеги!

Помогите пожалуйста отключить скролл страницы при открытии модального окна Colorbox.

Модальные окна открываются по ссылкам следующего вида:

<ul>
  <li><a class="colorbox-inline" href="?inline=true#block-views-contacts-block">Contacts</a></li>
  <li><a class="colorbox-inline" href="?width=500px&amp;height=400px&amp;inline=true#block-views-contacts-privacy-policy">Privacy Policy</a></li>
</ul>

Буду благодарна за пошаговые инструкции.

Лучший ответ

Аватар пользователя Tinnka Tinnka 31 марта 2018 в 11:46

Итоговое решение задачи:

  1. Создаем ссылку для вывода блока в модальном окне Colorbox:
    <a class="colorbox-inline" href="?width=80%&height=80%&inline=true#block-views-contacts-privacy-policy">Политика конфиденциальности</a>

    Как настроить вывод блока в попапе Colorbox смотрим тут.
    Смотрим на полосу прокрутки, расстраиваемся! Sad
    Окно с полосой прокрутки

  2. В настройках Colorbox выбираем стиль который понравится (я выбрала "Простой текст"):
    Выбор стиля
  3. Открываем папку с файлами понравившегося стиля (у меня это plain) и копируем файлы
    sites/all/modules/colorbox/styles/plain/colorbox_style.css
    sites/all/modules/colorbox/styles/plain/colorbox_style.js
  4. Размещаем скопированные файлы (переименовав их по желанию) в своей теме (или любом другом месте по вашему желанию), после чего в файл .info для вашей темы дописываем путь к этим файлам:
    stylesheets[all][] = css/colorbox_mystyle.css
    scripts[] = js/colorbox_mystyle.js
  5. В настройках Colorbox выбираем стиль "Нет" чтобы подтянулись наши настройки стиля:
    Отключаем предустановленные стили
  6. Правим файл "colorbox_mystyle.js" следующим образом (добавленные строки отмечены "+", при копировании себе удалить "+"):
    <?php
    /**
     * @file
     * Colorbox module style js.
     */

    (function ($) {

    Drupal.behaviors.initColorboxPlainStyle = {
          attach: function (context, settings) {
        $(    context).bind('cbox_complete', function () {
              // Make all the controls invisible.
              $('#cboxCurrent, #cboxSlideshow, #cboxPrevious, #cboxNext', context).addClass('element-invisible');
              // Replace "Close" with "×" and show.
              $('#cboxClose', context).html('\327').addClass('cbox-close-plain');
              // Hide empty title.
              if ($('#cboxTitle:empty', context).length == true) {
            $(    '#cboxTitle', context).hide();
          }
          $(    '#cboxLoadedContent', context).bind('mouseover', function () {
            $(    '#cboxClose', context).animate({opacity: 1}, {queue: false, duration: "fast"});
            if ($(    '#cboxTitle:empty', context).length == false) {
              $(    '#cboxTitle', context).slideDown();
            }
          });
          $(    '#cboxOverlay', context).bind('mouseover', function () {
            $(    '#cboxClose', context).animate({opacity: 0}, {queue: false, duration: "fast"});
            if ($(    '#cboxTitle:empty', context).length == false) {
              $(    '#cboxTitle', context).slideUp();
            }
          });
        });

    +    $(

    context).bind('cbox_open', function () {
    +      $(    'body', context).addClass('colorbox');
    +    });

        $(

    context).bind('cbox_closed', function () {
          $(    '#cboxClose', context).removeClass('cbox-close-plain');
    +      $(    'body', context).removeClass('colorbox');
        });
      }
    };

    })(

    jQuery);
    ?>
  7. В конец файла "colorbox_mystyle.css" дописываем следующее:
    .colorbox {
      overflow: hidden;
    }

    При желании в этом же файле меняем стили colorbox по желанию.

  8. Очищаем кеш и наслаждаемся результатом Smile
    Окно без полосы прокрутки

Комментарии

Аватар пользователя gun_dose gun_dose 29 марта 2018 в 11:47
1

У вас скроллится страница вместе с оверлеем или за оверлеем? Если первое, то на оверлей повесить position:fixed, а если второе, то при открытии модалки нужно добавлять класс к body (может быть, он уже добавляется сам) и на этот класс повесить overflow:hidden

Аватар пользователя Tinnka Tinnka 29 марта 2018 в 12:05

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

#colorbox, #cboxOverlay, #cboxWrapper {
   position:fixed !important;
}

Осталось для body указать overflow:hidden, но к сожалению никакой класс для body при открытии модалки не добавляется, как его добавлять самостоятельно (использую дочернюю тему Bootstrap)?

Аватар пользователя Tinnka Tinnka 31 марта 2018 в 11:46

Итоговое решение задачи:

  1. Создаем ссылку для вывода блока в модальном окне Colorbox:
    <a class="colorbox-inline" href="?width=80%&height=80%&inline=true#block-views-contacts-privacy-policy">Политика конфиденциальности</a>

    Как настроить вывод блока в попапе Colorbox смотрим тут.
    Смотрим на полосу прокрутки, расстраиваемся! Sad
    Окно с полосой прокрутки

  2. В настройках Colorbox выбираем стиль который понравится (я выбрала "Простой текст"):
    Выбор стиля
  3. Открываем папку с файлами понравившегося стиля (у меня это plain) и копируем файлы
    sites/all/modules/colorbox/styles/plain/colorbox_style.css
    sites/all/modules/colorbox/styles/plain/colorbox_style.js
  4. Размещаем скопированные файлы (переименовав их по желанию) в своей теме (или любом другом месте по вашему желанию), после чего в файл .info для вашей темы дописываем путь к этим файлам:
    stylesheets[all][] = css/colorbox_mystyle.css
    scripts[] = js/colorbox_mystyle.js
  5. В настройках Colorbox выбираем стиль "Нет" чтобы подтянулись наши настройки стиля:
    Отключаем предустановленные стили
  6. Правим файл "colorbox_mystyle.js" следующим образом (добавленные строки отмечены "+", при копировании себе удалить "+"):
    <?php
    /**
     * @file
     * Colorbox module style js.
     */

    (function ($) {

    Drupal.behaviors.initColorboxPlainStyle = {
          attach: function (context, settings) {
        $(    context).bind('cbox_complete', function () {
              // Make all the controls invisible.
              $('#cboxCurrent, #cboxSlideshow, #cboxPrevious, #cboxNext', context).addClass('element-invisible');
              // Replace "Close" with "×" and show.
              $('#cboxClose', context).html('\327').addClass('cbox-close-plain');
              // Hide empty title.
              if ($('#cboxTitle:empty', context).length == true) {
            $(    '#cboxTitle', context).hide();
          }
          $(    '#cboxLoadedContent', context).bind('mouseover', function () {
            $(    '#cboxClose', context).animate({opacity: 1}, {queue: false, duration: "fast"});
            if ($(    '#cboxTitle:empty', context).length == false) {
              $(    '#cboxTitle', context).slideDown();
            }
          });
          $(    '#cboxOverlay', context).bind('mouseover', function () {
            $(    '#cboxClose', context).animate({opacity: 0}, {queue: false, duration: "fast"});
            if ($(    '#cboxTitle:empty', context).length == false) {
              $(    '#cboxTitle', context).slideUp();
            }
          });
        });

    +    $(

    context).bind('cbox_open', function () {
    +      $(    'body', context).addClass('colorbox');
    +    });

        $(

    context).bind('cbox_closed', function () {
          $(    '#cboxClose', context).removeClass('cbox-close-plain');
    +      $(    'body', context).removeClass('colorbox');
        });
      }
    };

    })(

    jQuery);
    ?>
  7. В конец файла "colorbox_mystyle.css" дописываем следующее:
    .colorbox {
      overflow: hidden;
    }

    При желании в этом же файле меняем стили colorbox по желанию.

  8. Очищаем кеш и наслаждаемся результатом Smile
    Окно без полосы прокрутки