Сделать отображение картинки поверх всего контента сайта, временно

someone · 2 Апр 2024

Возникла нужда вывесить на сайте поверх всего контента большую картинку,
да так чтоб она заняла 100 процентов высоты страницы. Не ифреймом, а просто средствами html/css.

При этом желательна кнопка закрытия, как на рекламе,
и нужно автозакрытие этого изображения через например 10 секунд.
А в идеале еще и кукис или запись в сессию, дабы в данные сутки картинка не отобразилась пользователю второй раз.

Да, я знаю про css и z-index, но я не верстальщик и вообще далёк от html/css/js... и потому с наскока не смог реализовать данную задачу.
А лишь через час поиска примеров вспомнил, что у меня на нескольких уровнях режется реклама и всё на нее похожее, и потому не смог найти примеры в сети ... искать еще час - уже не хватило упертости.

В общем прощу помощи форума,
наверняка задача не самая редкая. Может кто может тыкнуть на пример, или на страницу с такой "рекламой", гдето уже сделанной.

palifeyo · 2 Апр 2024

Как пример готовое решение с коленки, по ходу внедрение может что-то отредактируешь...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Поверхостная картинка</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="overlay" id="overlay">
<div class="overlay-content">
<img src="your-image.jpg" alt="Крупная картинка" class="overlay-image">
<button id="closeBtn">Закрыть</button>
</div>
</div>

<script src="script.js"></script>

</body>
</html>

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: none;
justify-content: center;
align-items: center;
}

.overlay-content {
position: relative;
}

.overlay-image {
max-width: 100%;
max-height: 100%;
}

#closeBtn {
position: absolute;
top: 10px;
right: 10px;
}

document.addEventListener('DOMContentLoaded', function () {
var overlay = document.getElementById('overlay');
var closeBtn = document.getElementById('closeBtn');

function closeOverlay() {
overlay.style.display = 'none';
}

closeBtn.addEventListener('click', closeOverlay);

setTimeout(closeOverlay, 10000);
});

Сделать отображение картинки поверх всего контента сайта, временно

someone

сисадмин сервера 0ed

palifeyo

Создатель