0

Здравствуйте.

Есть такой вот код: http://jsfiddle.net/Deonis/nb7Yg/

При клике по кнопке открывается модальное окно с iframe с содержимым другого сайта. Проблема в том, что если содержимое в модальном окне большое, то при прокрутке, если указатель мыши не на модальном окне находится, прокручивается сама страница, модальное окно улетает за границу окна. А нужно, чтобы при открытом модальном окне при скролле прокручивалось только содержимое модального окна.

2 ответа 2

1

Если я вас правильно понял, то можно сделать так, данный способ убирает прокрутку контента под модальным окном:

CSS (добавляем к тому что было в изначальном примере)

.modal-lock {
    overflow: hidden !important;
    width: auto;
}

JS

$('button').click(function(){
    layer.show();
    $('html').addClass('modal-lock'); // Добавляем класс при открытии модалки
    modal.show().animate({
        width: 300,
        height: 200,
        marginLeft: -150,
        marginTop: -100
    }, function(){
        $(this).html(modalContent);
    });
});
layer.click(function(){
    $('html').removeClass('modal-lock'); // Удаляем класс при закрытии
    modal.fadeOut('slow', function(){
        $(this).html('');
        layer.fadeOut('fast');
    });
});
1
  • Спасибо, то что нужно!!!
    – Batyabest
    19 янв 2015 в 15:35
1

Решение. Добавил overflow:hidden при открытом окне

body.modal{
   overflow:hidden;
}

$(document.body).addClass("modal"); // При открытии
$(document.body).removeClass("modal"); // При закрытии
1
  • Возможно, тоже правильно решение, но первый ответ был более полным и удобным для тестирования и проверки.
    – Batyabest
    19 янв 2015 в 15:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.