Как сделать так, чтобы всплывающее окно при клике отображалось поверх слайдера Swiper?

Question

Ильдар

swiper , css

Как сделать так, чтобы всплывающее окно при клике отображалось поверх слайдера Swiper?

Я реализовал переключение контента и главного изображения на весь экран с использованием слайдера. У контента есть кнопка "Смотреть", при нажатии на которую открывается всплывающее окно. Однако, это окно появляется не поверх, а под блоками слайдера. Я не могу разобраться, почему не удается сделать так, чтобы всплывающее окно отображалось поверх остальных элементов. Я пробовал различные подходы и решил, что дело может быть в чем-то конкретном. 

Вот рабочая схема: 
<a href="https://codepen.io/AXOT/pen/RwXpyab" rel="nofollow">https://codepen.io/AXOT/pen/RwXpyab</a>

15 октября 2024 г. 4:52

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

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

Answer 1

Для того чтобы всплывающее окно отображалось поверх слайдера Swiper, скорее всего, вам нужно настроить свойство `z-index` для вашего всплывающего окна. Чтобы сделать это, вам нужно убедиться, что у всплывающего окна установлен высокий `z-index`, а также что его родительские элементы (если такие есть) не имеют меньшего `z-index`, чем ваше окно.

Вот пошаговые действия, которые вы можете предпринять:

1. Найдите CSS стиль вашего всплывающего окна (например, класс, который вы используете, чтобы показать окно). Допустим, класс всплывающего окна называется `.popup`.

2. Убедитесь, что для `.popup` задано свойство `position` с одним из значений: `absolute`, `fixed`, или `relative`. Это необходимо для того, чтобы `z-index` работал.

3. Установите `z-index` для всплывающего окна выше, чем у слайдера. Например:

    ```css
    .popup {
        position: fixed; /* или absolute, зависит от вашего дизайна */
        top: 50%; /* Для центрирования всплывающего окна */
        left: 50%; /* Для центрирования всплывающего окна */
        transform: translate(-50%, -50%); /* Для центрирования всплывающего окна */
        z-index: 1000; /* Убедитесь, что это значение больше, чем у слайдера */
        display: none; /* По умолчанию скрыто */
    }

    .swiper-container { /* или какой-то другой контейнер слайдера */
        position: relative; /* Обязательно, если у вас есть z-index */
        z-index: 1; /* Менее чем у всплывающего окна */
    }
    ```

4. После того, как вы установили необходимый стиль, не забудьте правильно управлять отображением всплывающего окна при клике на кнопку "Смотреть". Например, использовать JavaScript для изменения свойства `display` на `block` или `flex`.

Пример кода для управления всплывающим окном на JavaScript:

```javascript
const popup = document.querySelector('.popup');
const button = document.querySelector('.watch-button');

button.addEventListener('click', () => {
    popup.style.display = 'block'; // Показываем всплывающее окно
});

// Добавьте обработчик для закрытия окна, если это необходимо
popup.addEventListener('click', () => {
    popup.style.display = 'none'; // Скрываем всплывающее окно
});
```

Если вы все еще сталкиваетесь с проблемами, проверьте консоль разработчика (DevTools) в вашем браузере, чтобы увидеть текущие стили и `z-index` элементов. Это поможет вам определить, почему всплывающее окно отображается под слайдером, и в случае необходимости внести изменения.

Answer 2

У Вас перекрывается блок со всем попапом блоком со свайпером. Выносите отображение попапа в другой элемент, который будет поверх всех (например в body). В этом может помочь либа для работы с тултипами, например floating-ui . Ну и никогда по ховеру такое не показывайте, только по клику.