Как сделать лайтбокс для своего сайта своими руками

18.07.2025

Подготовка и создание основы

Начинайте с определения места для размещения лайтбокса. Сделайте небольшую копию изображения или контента, который хотите показывать в всплывающем окне. Подготовьте HTML-структуру, включающую контейнер для фонового затемнения и сам лайтбокс.

HTML-код для лайтбокса

Создайте блоки:

  1. <div id="overlay"></div> – затемнение фона.
  2. <div id="lightbox">... – само всплывающее окно.

Внутри <div id="lightbox"> разместите изображение или любой другой контент, например:

<div id="lightbox">
<button id="close">Закрыть</button>
<img src="ваша-картинка.jpg" alt="Описание">
</div>

Добавление функциональности

Используйте JavaScript для управления появлением и скрытием лайтбокса. Для этого добавьте обработчики событий:

  • При клике на активатор (например, кнопку или изображение), показывать #overlay и #lightbox.
  • При клике на кнопку «Закрыть» или на затемнение скрывать оба блока.

Пример скрипта:

<script>
document.querySelector('#yourTrigger').addEventListener('click', function() {
document.querySelector('#overlay').style.display = 'block';
document.querySelector('#lightbox').style.display = 'block';
});
document.querySelector('#close').addEventListener('click', function() {
document.querySelector('#overlay').style.display = 'none';
document.querySelector('#lightbox').style.display = 'none';
});
document.querySelector('#overlay').addEventListener('click', function() {
document.querySelector('#overlay').style.display = 'none';
document.querySelector('#lightbox').style.display = 'none';
});
</script>

Советы по стилизации и адаптации

Без использования CSS добавьте стили прямо в атрибут style или внутри тега <style>. Основные параметры:

  • Поставьте display: none; для скрытых элементов.
  • Для красивого вида задайте размеры, позиционирование и тени для #lightbox.
  • Расположите #overlay так, чтобы он покрывал весь экран и затемнял фон:
#overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0,0,0,0.7);
display: none;
z-index: 999;
}
#lightbox {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
max-width: 80%;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
display: none;
z-index: 1000;
}

Заключение

Двухэтапный процесс – подготовка HTML-структуры и написание скрипта для управления отображением – позволяет создать простой и функциональный лайтбокс без сложных библиотек. Экспериментируйте с позиционированием и стилями, чтобы достичь нужного визуального результата. Встроенные инструменты дадут возможность адаптировать решение под любой дизайн сайта.