Есть несколько способов предотвратить смещение контента при открытии модального окна:
1. Фиксированный позиционирование: Установите `position: fixed;` для модального окна. Это позволит окну оставаться на месте, даже если вы прокручиваете страницу.
```css
.modal {
position: fixed;
/* остальные стили */
}
```
2. Использование класса на body: Добавьте класс на `<body>`, когда модальное окно открывается, и примените стили для этого класса, чтобы предотвратить смещение контента.
```css
.modal-open {
overflow: hidden;
}
```
```javascript
// При открытии модального окна
document.body.classList.add('modal-open');
```
3. Добавление отступа с использованием паддинга: Добавьте отступ с использованием `padding-right`, чтобы учесть отсутствующую вертикальную прокрутку и предотвратить смещение контента.
```css
.modal-open {
padding-right: 15px; /* Ширина вертикальной полосы прокрутки */
}
```
```javascript
// При открытии модального окна
document.body.classList.add('modal-open');
```
Убедитесь, что правила стилей и добавление класса применяются в нужном порядке, чтобы сначала применять стили, а затем добавлять класс на `<body>`. Это может зависеть от вашего кода и структуры страницы.