Jak vytvořit vyskakovací obrázky

Toto je skutečný modální box, který se zaměřuje. Dělejte si s tím, co chcete. Začali jsme s okrajem, výplní a barvou pozadí. Okraj: 15 % auto se používá k tlačení modálního boxu shora dolů (15 %) a jeho vystředění (auto).

Jak na to — modální obrázky

Naučte se vytvářet responzivní modální obrázky pomocí CSS a JavaScriptu.

Modální obrázek

Modální je dialogové okno/vyskakovací okno, které se zobrazuje v horní části aktuální stránky.

Tento příklad používá většinu kódu z předchozího příkladu, Modal Boxes, pouze v tomto příkladu používáme obrázky.

Krok 1) Přidejte HTML:

Příklad

class=»modal» je kontejnerový prvek pro modal a div s je místo, kam vkládáte svůj modální obsah (nadpisy, odstavce, obrázky atd.).

Prvek s by měl být použit k uzavření modálu.

Krok 2) Přidejte CSS:

Příklad

/* Upravte styl obrázku použitého ke spuštění modalu */
#myImg border-radius: 5px;
Kurzor: ukazatel;
přechod: 0.3s;
>

/* Modal (pozadí) */
.modální zobrazení: žádné; /* Ve výchozím nastavení skryté */
poloha: pevná; /* Zůstaň na místě */
z-index: 1; /* Sedni si nahoře */
padding-top: 100px; /* Umístění krabice */
vlevo: 0;
horní: 0;
šířka: 100 %; /* Plná šířka */
výška: 100 %; /* Plná výška */
přetečení: auto; /* V případě potřeby povolit posouvání */
barva pozadí: rgb(0,0,0); /* Záložní barva */
barva pozadí: rgba(0,0,0,0.9); /* Černá s neprůhledností */
>

/* Modální obsah (obrázek) */
.rozpětí modálního obsahu: auto;
zobrazení: blok;
šířka: 80%;
maximální šířka: 700 pixelů
>

/* Popis modálního obrázku (text obrázku) — stejná šířka jako obrázek */
#okraj titulku: auto;
zobrazení: blok;
šířka: 80%;
maximální šířka: 700 pixelů
text-align: center;
barva: #ccc;
výplň: 10px 0;
výška: 150px;
>

/* Přidat animaci — Přiblížit modal */
.modal-content, #caption
název-animace: zoom;
délka animace: 0.6s;
>

/* Tlačítko Zavřít */
.blízká pozice: absolutní;
top: 15px;
doprava: 35px;
barva: #f1f1f1;
velikost písma: 40px;
font-weight: tučné;
přechod: 0.3s;
>

.close:hover,
.close:focus color: #bbb;
textové dekorace: žádné;
Kurzor: ukazatel;
>

/* 100% šířka obrazu na menších obrazovkách */
@media only screen and (max-width: 700px).modal-content width: 100%;
>
>

Třída .modal představuje okno ZA skutečným modálním boxem. Výška a šířka je nastavena na 100 %, což by mělo vytvořit iluzi okna na pozadí.

Přidejte černou barvu pozadí s neprůhledností.

Nastavte polohu na pevnou; což znamená, že se bude po stránce pohybovat nahoru a dolů, když uživatel roluje.

Ve výchozím nastavení je skrytý a měl by se zobrazit kliknutím na tlačítko (tím se budeme zabývat později).

Třída .modal-content

Toto je skutečný modální box, který se zaměřuje. Dělejte si s tím, co chcete. Začali jsme s okrajem, výplní a barvou pozadí. Okraj: 15 % auto se používá k tlačení modálního boxu shora dolů (15 %) a jeho vystředění (auto).

Nastavili jsme také šířku na 400 pixelů – to může být více nebo méně, v závislosti na velikosti obrazovky. Tomu se budeme věnovat později.

Třída .close

Tlačítko Zavřít má styl s velkým písmem, specifickou barvou a plave doprava. Přidali jsme také některé styly, které změní barvu tlačítka pro zavření, když na něj uživatel najede myší.

Krok 3) Přidejte JavaScript:

Příklad

// Získejte modal
var modal = document.getElementById(«myModal»);

// Získejte obrázek a vložte jej do modalu — použijte jeho „alt“ text jako popisek
var img = document.getElementById(«myImg»);
var modalImg = document.getElementById(«img01»);
var captionText = document.getElementById(«caption»);
img.onclick = function() modal.style.display = «blok»;
modalImg.src = this.src;
captionText.innerHTML = this.alt;
>

// Získá prvek, který uzavírá modal
var span = document.getElementsByClassName(«close»)[0];

// Když uživatel klikne na (x), zavře modal
span.onclick = function()
modal.style.display = «žádný»;
>

Tip: Podívejte se také na Modals a Lightbox.