Lightbox, как эффект наложения, чтобы отобразить скрытый DIV при нажатии

Вы можете сделать это так:

В HTML-коде:

<div class="overlay">

    [whatever you want to display in the overlay DIV]

</div>

В CSS-коде:

div.overlay {
    width: 650px;
    height: 400px;
    position: fixed;
    left: calc(50% - 340px);
    top: calc(50% - 230px);
    -moz-border-radius: 15px;
    border-radius: 15px;
    z-index: 999;
    -webkit-transition: opacity 1.5s;
    transition: opacity 1.5s;
    opacity: 0;
}

Все остальные дизайнерские вещи (например, семейство шрифтов, цвет и т.д.) Тоже входят в это.

Код-Объяснение
ширина: 650 пикселей - ширина ящиков
высота: 400 пикселей - высота ящиков
позиция: фиксированная - она не прокручивается
left: calc (50% - 340px) - Он расположен посередине
top: calc (50% - 230px) - Он расположен посередине
border-radius: 15px - Сделайте округлый z-index: 999 - он сверху каждый раз (убедитесь, что другие имеют более низкие z-индексы).
переход: непрозрачность 1.5s - затухает в
opacity: 0 - делает его невидимым

Итак, на данный момент ящик полностью невидим. Вы можете сделать его видимым с помощью javascript:

function open() {
    document.getElementById("overlay").style.visibility = "visible";
    document.getElementById("overlay").style.opacity = 1;
}
function close() {
    document.getElementById("overlay").style.opacity = 1;
    document.getElementById("overlay").style.visibility = "visible";
}

Последний шаг, который вам нужно сделать, - вызвать функцию в вашем HTML:

<a href="#" onClick="open()">Open</a>

и в вашем ящике ссылка для закрытия:

<a href="#" onClick="close()">Close</a>

Другим возможным способом, на мой взгляд, более удобным для пользователя способом является создание другого с использованием фона класса. Это получает onClick = "close". Код может выглядеть так:

HTML

<div class="background" onClick="close()"></div>

CSS

div.dark {
    position:fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-transition: opacity 0.8s;
    transition: opacity 0.8s;
    opacity: 0;
}

Затем вы должны добавить в функцию open() следующее:

document.getElementById("background").style.visibility = "visible";
document.getElementById("background").style.opacity = 1;

И в функции close():

document.getElementById("background").style.opacity = 0;
document.getElementById("background").style.visibility = "hidden";

Если вы сделаете это так, когда посетитель нажимает на любом месте страницы, кроме наложения, он будет исчезать. Фон также делает страницу немного более темной, пока оверлей открыт, поэтому посетитель сосредоточится на окне наложения. Если вы не хотите сделать страницу более темной, измените ее

background-color: rgba(0, 0, 0, 0.5);

в

background-color: rgba(0, 0, 0, 0);

Желаю вам удачи на вашей веб-странице, и я надеюсь, что смогу вам помочь!