Как сделать чтобы модальное окно не сдвигало блок position:fixed?

Question

malayamarisha @malayamarisha

CSS

Как сделать чтобы модальное окно не сдвигало блок position:fixed?

Всем привет.
Реализовано модальное окно с помощью bootstrap.
В стандартном функционале при открытии модального окна элементу body добавляется класс .modal-open, а также убирается полоса прокрутки (чтобы не было возможности прокрутить страницу, пока открыто модальное окно).
Для того, чтобы контент не сдвигался (на ширину полосы прокрутки) добавлен класс

body.modal-open {
    overflow: hidden;
    padding-right: 17px !important;
}

Но есть header, у которого стиль position:fixed и не удается исправить сдвиг header при открытии модального окна.
Подскажите, пожалуйста, как можно при открытии модального окна убрать сдвиг header?

Вопрос задан 28 нояб. 2023
204 просмотра

7 комментариев

Подписаться 1 Простой 7 комментариев

szQocks @szQocks

а какой именно сдвиг ? смотри если у тебя изначально header имеет position: fixed и мы прокрутили страницу на половину и решили открыть модальное окно - в этот момент header как двигался сверху так и будет оставаться сверху, о каком сдвиге ты говоришь - непонятно, точнее опиши проблему

Написано 28 нояб. 2023
szQocks @szQocks

а я понял какой сдвиг, ща подумаю

Написано 28 нояб. 2023
malayamarisha @malayamarisha Автор вопроса

szQocks, спасибо что откликнулись )
При открытии модального окна header сдвигается в сторону (вправо).
И видимо как раз на 17px (ширина полосы прокрутки).
Сдвиг контента удалось скорректировать, а вот сдвиг header не выходит.

Написано 28 нояб. 2023
szQocks @szQocks

malayamarisha, хотя нет, туплю, сдвига не будет, проверил, я думал сдвиг будет наверх. А ты говоришь в право, тут единственный вариант вижу это добавить padding который равен ширину скролла для body и header, во время открытого модального окна, но и лучше этого не делать, пусть прыгает.

Написано 28 нояб. 2023
malayamarisha @malayamarisha Автор вопроса
szQocks, Спасибо огромнейшее за помощь, развернутый ответ, подсказки )
В процессе написания ответа пришла мысль, что не верно получалось добраться до нужного блока.
Есть разметка при открытом модальном окне (body добавляется класс modal-open) :

<body class="body modal-open"> <header class="header fixed-header"> <div class="container-fluid header-container pl-0 pr-0 header--fixed"> <div class="top-menu"></div>  <div class="navbar"></div>  </div> </header> </body>

Рабочий вариант:

body.modal-open>header>.header--fixed { padding-right: 17px !important; }

Были попытки добавить padding-right header-у (ниже одна из многочисленных попыток):

body.modal-open>.header--fixed { padding-right: 17px !important; }

Единственно, на данный момент, при открытии модального окна вместо отсутствующего скролла выводится незаполненный кусочек первой строки меню )
Но это уже другая история )
Написано 28 нояб. 2023
szQocks @szQocks

malayamarisha,
Единственно, на данный момент, при открытии модального окна вместо отсутствующего скролла выводится незаполненный кусочек первой строки меню )
Но это уже другая история )
да хоть так и хоть так - будет проблема какая-нибудь

я делал проекты с модальными окнами - у меня там прыгал контент вправо при открытии модальных окон - и я считаю это нормой

P.S да и толком я ничем не помог

Написано 28 нояб. 2023
Ankhena @Ankhena Куратор тега CSS

malayamarisha, При нормальной верстке должно быть достаточно селектора .modal-open .header--fixed и без всяких important
Если недостаточно, то смотрите какому селектору вы до этого задавали паддинг и разбирайтесь почему и зачем у него высокая специфичность.

И > это прямые потомки, а вам нужен непрямой, поэтому обычный пробел.

Написано 28 нояб. 2023

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 3 часа назад
- 30 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 13 часов назад
- 62 просмотра
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 13 часов назад
- 35 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 18 часов назад
- 47 просмотров
0

ответов
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- вчера
- 87 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- вчера
- 65 просмотров
1

ответ
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- вчера
- 55 просмотров
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- 20 нояб.
- 100 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 85 просмотров
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 73 просмотра
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

move2usajobs LLC • Лос-Анджелес

от 2 000 до 4 000 $

Задание Project manager, тест

23 нояб. 2024, в 11:55

5000 руб./за проект

SSL/TLS Certificate pinning / Reverse engineer Android

23 нояб. 2024, в 09:59

2000 руб./в час

Перерисовать логотип в вектор

23 нояб. 2024, в 08:36

2000 руб./за проект

а какой именно сдвиг ? смотри если у тебя изначально header имеет position: fixed и мы прокрутили страницу на половину и решили открыть модальное окно - в этот момент header как двигался сверху так и будет оставаться сверху, о каком сдвиге ты говоришь - непонятно, точнее опиши проблему
szQocks, спасибо что откликнулись )
При открытии модального окна header сдвигается в сторону (вправо).
И видимо как раз на 17px (ширина полосы прокрутки).
Сдвиг контента удалось скорректировать, а вот сдвиг header не выходит.
malayamarisha, хотя нет, туплю, сдвига не будет, проверил, я думал сдвиг будет наверх. А ты говоришь в право, тут единственный вариант вижу это добавить padding который равен ширину скролла для body и header, во время открытого модального окна, но и лучше этого не делать, пусть прыгает.
szQocks, Спасибо огромнейшее за помощь, развернутый ответ, подсказки )
В процессе написания ответа пришла мысль, что не верно получалось добраться до нужного блока.
Есть разметка при открытом модальном окне (body добавляется класс modal-open) :

<body class="body modal-open"> <header class="header fixed-header"> <div class="container-fluid header-container pl-0 pr-0 header--fixed"> <div class="top-menu"></div>  <div class="navbar"></div>  </div> </header> </body>

Рабочий вариант:

body.modal-open>header>.header--fixed { padding-right: 17px !important; }

Были попытки добавить padding-right header-у (ниже одна из многочисленных попыток):

body.modal-open>.header--fixed { padding-right: 17px !important; }

Единственно, на данный момент, при открытии модального окна вместо отсутствующего скролла выводится незаполненный кусочек первой строки меню )
Но это уже другая история )
malayamarisha,
Единственно, на данный момент, при открытии модального окна вместо отсутствующего скролла выводится незаполненный кусочек первой строки меню )
Но это уже другая история )
да хоть так и хоть так - будет проблема какая-нибудь

я делал проекты с модальными окнами - у меня там прыгал контент вправо при открытии модальных окон - и я считаю это нормой

P.S да и толком я ничем не помог
malayamarisha, При нормальной верстке должно быть достаточно селектора .modal-open .header--fixed и без всяких important
Если недостаточно, то смотрите какому селектору вы до этого задавали паддинг и разбирайтесь почему и зачем у него высокая специфичность.

И > это прямые потомки, а вам нужен непрямой, поэтому обычный пробел.

Answer 1 · 2023-12-04 09:35:24

body.modal-open header {
    overflow: hidden;
position: relative;
    padding-right: 17px !important;
}

пока существует класс у body modal-open header будет с этими параметрами. Уберётся класс всё вернётся как было.

Как сделать чтобы модальное окно не сдвигало блок position:fixed?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт