Как да създадете Lightbox само с HTML

Lightbox е уеб инструмент, който показва съдържание (изображения, текст и др.) в малка прозорчеца, изскачаща в центъра на екрана при клик върху връзка. Обикновено за създаването му се използва JavaScript, но с правилно структуриран HTML и CSS можете да постигнете същия ефект без скриптове.

Стъпка 1 – Добавете CSS в `<head>`

Отворете любимия си текстов редактор (Notepad, TextEdit и т.н.) и в секцията <head> поставете следния код:

<style type="text/css">
.black_overlay{
    display:none;
    position:absolute;
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    background-color:black;
    z-index:1001;
    -moz-opacity:0.8;
    opacity:0.8;
    filter:alpha(opacity=80);
}

.white_content{
    display:none;
    position:absolute;
    top:25%;
    left:25%;
    width:50%;
    height:50%;
    padding:16px;
    border:16px solid orange;
    background-color:white;
    z-index:1002;
    overflow:auto;
}
</style>

Стъпка 2 – Съдържанието на Lightbox‑а

В частта <body> на страницата поставете HTML, който искате да се появи в Lightbox‑а. Например:

<div id="lightbox" class="white_content">
    Текст, изображения или каквото желаете да покажете.
    <br/>
    <a href="#" onclick="document.getElementById('lightbox').style.display='none';document.getElementById('overlay').style.display='none';">Затвори</a>
</div>
<div id="overlay" class="black_overlay"></div>

Стъпка 3 – Добавете бутон за затваряне

Във вътрешността на .white_content добавете връзка с надпис „Затвори“, която скрива както съдържанието, така и полупрозрачния слой.

Стъпка 4 – Създайте връзка, която отваря Lightbox‑а

Поставете кликваема връзка, която показва двата елемента:

<a href="#" onclick="document.getElementById('lightbox').style.display='block';document.getElementById('overlay').style.display='block';">Кликнете тук, за да отворите Lightbox</a>

Запазете файла и отворете страницата в браузъра – Lightbox‑ът ще се появи само с HTML и CSS.

Съвет

Използвайте Lightbox за показване на изображения, видеоклипове или важна информация. Той се интегрира лесно в различни секции на сайта без нужда от допълнителни скриптове.

URL:https://bg.whycomputer.com/Internet/100207205.html

Как да повишите CPM (цена за хиляда показвания)

Как да разберете кой е вашият интернет доставчик (ISP)

Интернет

Как да създадете етикети за CD на Mac

Създаването на етикети за CD вече не е привилегия само на музикалните компании и графичните дизайнери. Днес много хора съхраняват резервни файлове, плейлисти и важни документи на компактдискове, затова персонализираните етикети са полезен начин за организация. Стъпка 1 Отворете Microsoft Word, отиде

Ръководство за създаване на уебсайт за математика

Уебсайт за математика е отличен начин да предложите допълнителна помощ, да създадете пространство за споделяне на бележки и упражнения и да дадете възможност на всеки да учи или да освежи математическите си умения. Сайтът може да бъде прост или сложен – важното е да имате ясни инструкции и примери,

Интернет