Jak použít jQuery pro generování modálního vyskakovacího okna po kliknutí

Jak použít jQuery pro generování modálního vyskakovacího okna po kliknutí

Modální okno je vyskakovací okno, které nutí uživatele k interakci před návratem na stránku. Modální boxy jsou užitečné pro varování, informační boxy a další. Modální box můžete vytvořit pomocí nástroje jQuery. Pokud jQuery neznáte, podívejte se na náš článek Základy jQuery, kde je vysvětleno, jak jQuery funguje.

Toto je interaktivní zobrazení kódu, které vám ukáže HTML, CSS, jQuery a ukázku výstupu.

Modální okno HTML

Chcete-li vytvořit modální vyskakovací okno, musíte nejprve vytvořit strukturu HTML.

Potřebujete vytvořit třídy pro překryvné okno a obsah vyskakovacího okna, abyste je mohli upravovat odděleně od zbytku dokumentu.

V tomto příkladu jsou vytvořeny třídy „popup-overlay“ a „popup-content“, které umožňují specifický styl CSS.

Všimněte si prvků tlačítek v tomto příkladu. Přidali jsme tlačítka, která mají spouštět vyskakovací okno. Jednomu tlačítku jsme přidělili třídu „open“, zatímco druhé má třídu „close“. Ta budou později použita k otevírání a zavírání vyskakovacího okna.

Modální CSS

V CSS musíte nastylovat třídy „popup-overlay“ a „popup-content“ tak, aby byly zpočátku skryté. Vyskakovací okno by nebylo vyskakovacím oknem, kdyby bylo viditelné od samého začátku. Vyskakovací okno můžeme skrýt změnou viditelnosti tříd:

.popup-overlay {visibility:hidden;}.popup-content {visibility:hidden;}

Nyní nechceme, aby bylo vyskakovací okno navždy skryté, proto musíme v CSS vytvořit speciální případ použití pro případ, kdy se má vyskakovací okno zobrazit. Použijeme jQuery, které nám pomůže určit, kdy se má vyskakovací okno zobrazit.

jQuery má možnost přidávat a odebírat třídy na základě akcí (například kliknutí). Pokud tedy naprogramujeme jQuery tak, aby při kliknutí na tlačítko „otevřít“ přidalo třídu „active“, můžeme v CSS použít třídu „active“ pro zobrazení vyskakovacího okna. Připojte třídu „active“ ke třídám vyskakovacího okna a vytvořte nový styling pro okamžik, kdy je vyskakovací okno viditelné.

Podívejte se na příklad níže, jak by měl tento styling CSS vypadat:

.popup-overlay.active{visibility:visible;}.popup-content.active {visibility:visible;}

Modální jQuery

Nyní je čas přidat jQuery. Před přidáním kódu jQuery nezapomeňte nastavit dokument HTML pro jQuery. Pokud si nejste jisti, jak to udělat, podívejte se na náš článek Příprava HTML dokumentu na jQuery.

Při kliknutí na tlačítka HTML „Otevřít“ a „Zavřít“ musí jQuery přidat nebo odebrat třídu „active“.

Tento první příkaz přidá při kliknutí na tlačítko „Otevřít“ třídu „active“.

$(".open").on("click", function(){$(".popup, .popup-content").addClass("active");});

Když se tak stane, třída „active“ se připojí ke třídám vyskakovacího okna, čímž se změní jeho viditelnost na „viditelné“. Jinými slovy, vyskakovací okno se zobrazí.

Druhý příkaz odstraní třídu „active“, když kliknete na tlačítko „Zavřít“.

$(".close, .popup").on("click", function(){$(".popup, .popup-content").removeClass("active");});

Když k tomu dojde, třída „active“ se odstraní z tříd vyskakovacího okna, což způsobí, že se vrátí ke svému předchozímu stylování, které má viditelnost nastavenou na „hidden“.

Přidejte oba příkazy jQuery do dokumentu. Pokud je vše provedeno správně, získáte základní modální vyskakovací okno.