Jak stworzyć Lightbox w HTML

Lightbox to narzędzie projektowe, które wyświetla w centrum ekranu małe okienko z obrazem, tekstem lub inną treścią po kliknięciu linku. Choć najczęściej wymaga JavaScriptu, można uzyskać podobny efekt wyłącznie przy pomocy HTML i CSS.

Krok 1 – Dodaj style

Otwórz edytor tekstu (Notepad, TextEdit, VS Code itp.) i w sekcji <head> wstaw następujący kod CSS:

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

.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>

Krok 2 – Umieść treść Lightboxa

W sekcji <body> wpisz dowolny kod HTML, który ma się pojawić w okienku. Przykład:

<div id="lightbox" class="white_content">
    Testing...Texting

    Zamknij
</div>
<div id="overlay" class="black_overlay"></div>

Krok 3 – Dodaj przycisk zamknięcia

Wewnątrz .white_content umieść link lub przycisk, który ukryje zarówno okienko, jak i warstwę przyciemnienia.

Krok 4 – Utwórz odnośnik otwierający Lightbox

Dodaj link, który po kliknięciu pokaże warstwę i okienko:

<a href="#" onclick="document.getElementById('lightbox').style.display='block'; document.getElementById('overlay').style.display='block'; return false;">Kliknij tutaj</a>

Zapisz plik i otwórz go w przeglądarce – efekt Lightbox działa bez użycia JavaScriptu.

Wskazówka

Lightbox świetnie sprawdza się przy prezentacji zdjęć, wideo lub formularzy kontaktowych.

URL:https://pl.whycomputer.com/Internet/100307205.html

Jak podnieść CPM (koszt za tysiąc wyświetleń)

Jak sprawdzić, kto jest Twoim dostawcą usług internetowych

Internet

Jak założyć blog na Yahoo

Blog, czyli skrót od „weblog”, to strona internetowa aktualizowana regularnie, często pełniąca rolę dziennika online. Yahoo umożliwia tworzenie darmowych blogów bez konieczności znajomości projektowania stron. Blogi mogą mieć różne tematy – politykę, rękodzieło, macierzyństwo, a także służyć do utrz

Jak stworzyć stronę internetową w CorelDRAW

WprowadzenieProfesjonalne, bogate w grafikę witryny nie muszą być tworzone wyłącznie w tradycyjnych edytorach HTML. CorelDRAW, program kojarzony głównie z projektowaniem graficznym, oferuje solidne rozwiązanie do budowy stron internetowych. Dla osób, które nie chcą poświęcać czasu na naukę kodowania

Jak dodać zakładkę (anchor) w HTML

Co to jest zakładka w HTML?Zakładka (anchor) pozwala oznaczyć dowolny fragment dokumentu i odwołać się do niego za pomocą linku. Dzięki temu użytkownik może szybko przejść do wybranej sekcji.Jak dodać zakładkęZnajdź w kodzie miejsce, które ma stać się celem zakładki – najczęściej nagłówek lub ważny

Internet