Как настроить модальное окно Bootstrap, чтобы, когда оно открыто, можно было прокручивать страницу?

Question

[Андрей]

Столкнулся с проблемой: страница смещается при открытии модального окна, потому что у тела убирается скролл и добавляется к модальному окну. Я сделал наоборот. Но вот проблема: у окна стоит position: fixed, т.е. оно прикреплено к окну браузера и стоит на месте при прокрутке. И если оно не влезает, то остальную часть пользователь увидеть и не может. Как можно это решить, используя бутстрап? Не принципиально, но лучше меньше JS. Спасибо

Comments

[Андрей]

Я нашел решение: при открытии окна делать правый отступ у тела равный разнице между тем, что было и тем, что стало. Это в теории работает и почти что на практике. Я настроил события, события точно срабатывают, но вот именно эти строки там не работают. При том, что сами по себе они хорошо работают.

[Андрей]

Да, не работает именно событие на показ. Вот код:

$(".modal").on("show.bs.modal", function(){
    $("body").css({'padding-right': ($("body").width()-$bodyWidth)});
});

$(".modal").on("hidden.bs.modal", function(){
    $("body").css({'padding-right': "0"});
});

[Андрей]

Если сделать событие shown взамен show, то начинает работать, но это слишком поздно, потому что страница сдвигается сразу, как окно вызвано.

Answer 1

[Андрей]

Дело все в том, что перед открытием окна размер тела еще не изменялся и я пытался сделать паддинг равным разнице между одинаковыми числами. Решил костылем: записывал ширину, отключал overflow-y и потом делал паддинг. При закрытии, соответственно, обратный процесс.

$(".modal").on("show.bs.modal", function(){
    var $bodyWidth = $("body").width();
    $("body").css({'overflow-y': "hidden"}).css({'padding-right': ($("body").width()-$bodyWidth)});
});

$(".modal").on("hidden.bs.modal", function(){
    $("body").css({'padding-right': "0", 'overflow-y': "auto"});
});

Answer 2

[Alena]

Отсутствие прокрутки делается за счет обрезание экрана свойством overflow:hidden которое ставится при открытии мод. окне классом .modal-open. По этому если в цсс убрать этому классу эти стили то появится возможность крутить страницу.
По идее это решение не требует вообще скриптов.

Comments

[Андрей]

Скрипты нужны были, чтобы окно тоже можно было прокручивать и при этом, чтобы не было двух полос прокрутки (я проверил, в хроме они появляются). А модальное окно не прокручивается, потому что у него position: fixed