Окно браузера прокручивается вверх при появлении всплывающего окна из-за специфики работы свойства `position: fixed`. Когда вы открываете всплывающее окно с использованием `position: fixed`, оно фиксируется относительно окна браузера и не зависит от скролла страницы. Поэтому при открытии попапа с `position: fixed`, окно браузера автоматически прокручивается вверх, чтобы попап оставался видимым на экране.
Чтобы реализовать попап с прозрачной подложкой на главной странице, используя `position: fixed` без автоматической прокрутки окна браузера, можно сделать следующее:
1. Создайте всплывающее окно с прозрачной подложкой в HTML и добавьте стили для него. Например:
```html
<div class="popup">
<div class="overlay"></div>
<div class="popup-content">
<!-- Содержимое попапа -->
</div>
</div>
```
```css
.popup {
position: fixed;
top: 50%; /* Разместить попап по центру вертикали */
left: 50%; /* Разместить попап по центру горизонтали */
transform: translate(-50%, -50%); /* Центрирование */
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Прозрачный цвет подложки */
}
```
2. Для открытия и закрытия попапа можно использовать JavaScript. Например:
```javascript
const popup = document.querySelector('.popup');
const overlay = document.querySelector('.overlay');
function openPopup() {
popup.style.display = 'block';
}
function closePopup() {
popup.style.display = 'none';
}
overlay.addEventListener('click', closePopup);
```
Теперь при открытии попапа с прозрачной подложкой, окно браузера останется на месте без автоматической прокрутки. Если открывается другой попап со скроллом, окно браузера будет также оставаться на месте, сохраняя прежнюю позицию скролла.