Kaip sukurti Lightbox naudojant tik HTML

Kas yra Lightbox?

Lightbox – tai interneto dizaino priemonė, kuri atidaro mažą langelį centre ekrano ir rodo jame turinį, pvz., nuotraukas ar tekstą, kai vartotojas paspaudžia nuorodą. Dažniausiai Lightbox sukuria JavaScript, tačiau čia pateikiamas metodas, kaip pasiekti tokį efektą naudojant tik HTML ir CSS.

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

Žingsniai

1 žingsnis – Sukurkite HTML struktūrą

Į <head> sekciją įkelkite aukščiau pateiktą CSS kodą. Tada <body> dalyje įrašykite turinį, kurį norite rodyti Lightbox lange, pvz.:

<div id="lightbox">
    <div class="white_content">
        Testing...Texting
        <button onclick="document.getElementById('lightbox').style.display='none'">Uždaryti</button>
    </div>
    <div class="black_overlay"></div>
</div>

2 žingsnis – Sukurkite nuorodą, kuri atidarys Lightbox

Pridėkite nuorodą, kuri perjungia Lightbox matomumą:

<a href="#" onclick="document.getElementById('lightbox').style.display='block';return false;">Spustelėkite čia</a>

3 žingsnis – Išsaugokite ir išbandykite

Įrašykite failą su .html plėtiniu ir atidarykite naršyklėje. Paspaudus nuorodą turėtumėte matyti iššokantį langelį su tekstu ir „Uždaryti“ mygtuku.

Patarimas

Lightbox puikiai tinka vaizdų ar video demonstravimui. Jį galima integruoti į bet kurią svetainės sekciją.

URL:https://lt.whycomputer.com/internetas/100407205.html

Kaip padidinti CPM (kainą už tūkstantį parodymų)

Kaip patikrinti, kuris yra jūsų interneto paslaugų tiekėjas (ISP)

Internetas

Kaip sukurti CD etiketes Mac kompiuteryje

Kaip sukurti CD etiketes Mac kompiuteryjeEtikečių kūrimas nebereikalingas tik muzikos įmonėms ar grafinio dizaino specialistams. Daug žmonių saugo atsargines duomenų kopijas, muzikos grojaraščius ir svarbius darbo dokumentus CD, todėl patogios CD etiketės tampa būtinos. Naudodami standartines Avery

Kaip sukurti matematikos svetainę nuo pradžios

Matematikos svetainė – puikus būdas teikti papildomą pagalbą, dalintis pastabomis ir mokytis naujų ar atnaujinti žinias. Tokią svetainę galite sukurti tiek paprastą, tiek sudėtingą, priklausomai nuo poreikių. Svarbiausia – aiškios instrukcijos ir pavyzdžiai, kuriuos lankytojai dažniausiai ieško. 1 ž

Internetas