Отключить скролл страницы при открытии при открытии модального окна 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>

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

0 Thanks

Лучший ответ

Аватар пользователя 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 смотрим тут.
    Смотрим на полосу прокрутки, расстраиваемся! :(
    Окно с полосой прокрутки

  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" следующим образом (добавленные строки отмечены "+", при копировании себе удалить "+"):
    /**
     * @file
     * Colorbox module style js.
     */

    (function ($) {

    Drupal.behaviors.initColorboxPlainStyle = {
      
    attach: function (contextsettings) {
        $(
    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({opacity1}, {queuefalseduration"fast"});
            if ($(
    '#cboxTitle:empty'context).length == false) {
              $(
    '#cboxTitle'context).slideDown();
            }
          });
          $(
    '#cboxOverlay'context).bind('mouseover', function () {
            $(
    '#cboxClose'context).animate({opacity0}, {queuefalseduration"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. Очищаем кеш и наслаждаемся результатом :)
    Окно без полосы прокрутки

Комментарии

Аватар пользователя 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 смотрим тут.
    Смотрим на полосу прокрутки, расстраиваемся! :(
    Окно с полосой прокрутки

  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" следующим образом (добавленные строки отмечены "+", при копировании себе удалить "+"):
    /**
     * @file
     * Colorbox module style js.
     */

    (function ($) {

    Drupal.behaviors.initColorboxPlainStyle = {
      
    attach: function (contextsettings) {
        $(
    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({opacity1}, {queuefalseduration"fast"});
            if ($(
    '#cboxTitle:empty'context).length == false) {
              $(
    '#cboxTitle'context).slideDown();
            }
          });
          $(
    '#cboxOverlay'context).bind('mouseover', function () {
            $(
    '#cboxClose'context).animate({opacity0}, {queuefalseduration"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. Очищаем кеш и наслаждаемся результатом :)
    Окно без полосы прокрутки