Hogyan használjuk a jQuery-t a modális felugró ablak generálásához, ha rákattintunk
A modális doboz egy felugró ablak, amely arra kényszeríti a felhasználót, hogy interakcióba lépjen vele, mielőtt visszatérne a webhelyre. A modális dobozok hasznosak figyelmeztetések, információs dobozok és más célokra. A jQuery segítségével hozhat létre modális dobozt. Ha nem ismeri a jQuery-t, olvassa el a jQuery alapjai című cikkünket a jQuery működésének magyarázatáért.
Ez egy interaktív kódmegjelenítés, amely megmutatja a HTML-t, a CSS-t, a jQuery-t és a kimenet demóját.
Modális HTML
A modális felugró ablak létrehozásához először a HTML szerkezetet kell létrehoznia.
Létre kell hoznia osztályokat a felugró felülvilágításhoz és a felugró tartalomhoz, hogy a dokumentum többi részétől elkülönítve szerkeszthesse őket.
Ez a példa létrehozza a “popup-overlay” és a “popup-content” osztályokat, hogy a CSS segítségével külön stílusozhassa azt.
Figyeljen a gombelemekre ebben a példában. Olyan gombokat adtunk hozzá, amelyekkel a felugró ablakot szeretnénk kiváltani. Az egyik gomb a “open”, míg a másik a “close” osztályt kapta. Ezeket fogjuk később használni a felugró ablak megnyitásához és bezárásához.
Modális CSS
A CSS-ben a “popup-overlay” és a “popup-content” osztályokat úgy kell megformázni, hogy kezdetben rejtett legyen. Egy felugró ablak nem lenne felugró ablak, ha kezdettől fogva látható lenne. A felugró ablakot az osztályok láthatóságának megváltoztatásával tudjuk elrejteni:
.popup-overlay {visibility:hidden;}.popup-content {visibility:hidden;}
Ha az osztályokat másképp nevezted el, mindenképpen helyettesítsd a .popup-overlay és .popup-content osztálynevekkel.
Most nem akarjuk, hogy a felugró ablak örökre rejtve maradjon, ezért a CSS-ben külön használati esetet kell létrehoznunk arra, hogy mikor kell a felugró ablakot megjeleníteni. A jQuery segítségével fogjuk meghatározni, hogy mikor legyen látható a felugró ablak.
A jQuery képes arra, hogy akciók (például kattintás) alapján osztályokat adjon hozzá és távolítson el. Tehát, ha úgy programozzuk a jQuery-t, hogy a “nyitás” gombra kattintáskor hozzáadjon egy “active” nevű osztályt, akkor a CSS-ben az “active” osztályt használhatjuk a felugró ablak megjelenítéséhez. Csatlakoztassuk az “active” osztályt a felugró osztályokhoz, és hozzunk létre egy új stílusjegyet, amikor a felugró ablak látható.
Az alábbi példában láthatjuk, hogyan kell kinéznie ennek a CSS stílusjegynek:
.popup-overlay.active{visibility:visible;}.popup-content.active {visibility:visible;}
Modal jQuery
Most itt az ideje, hogy hozzáadjuk a jQuery-t. A jQuery kód hozzáadása előtt mindenképpen állítsa be a HTML-dokumentumot a jQuery számára. Ha nem biztos benne, hogyan kell ezt megtenni, olvassa el a HTML dokumentum jQuery-re való felkészítése című cikkünket.
A “Megnyitás” és “Bezárás” HTML gombok kattintásakor a jQuery-nek hozzá kell adnia vagy el kell távolítania az “aktív” osztályt.
Ez az első utasítás hozzáadja az “aktív” osztályt, amikor a “Megnyitás” gombra kattintunk.
$(".open").on("click", function(){$(".popup, .popup-content").addClass("active");});
Amikor ez megtörténik, az “aktív” osztály hozzáadódik a felugró ablak osztályaihoz, így a felugró ablak láthatósága “láthatóra” változik. Más szóval, a felugró ablak megjelenik.
Ez a második utasítás eltávolítja az “aktív” osztályt, amikor a “Bezárás” gombra kattintunk.
$(".close, .popup").on("click", function(){$(".popup, .popup-content").removeClass("active");});
Amikor ez történik, az “aktív” osztály eltávolításra kerül a felugró ablak osztályokból, így azok visszatérnek a korábbi stílusukhoz, amelynek láthatósága rejtettre van állítva.
Adja hozzá a jQuery mindkét utasítását a dokumentumához. Ha mindezt helyesen végezte el, akkor egy kezdetleges modális felugró ablakot kap.
A jQuery egy MIT licenc alatt engedélyezett nyílt forráskódú szoftver. jQuery nem a Pair Networks, Inc. terméke, és a Pair Networks nem vállal garanciát a jQuery-re. Felhívjuk figyelmét, hogy a javascript könyvtáraknak számos szintje létezik. Kérjük, forduljon informatikai szakemberéhez tanácsért és útmutatásért a megfelelő könyvtár kiválasztásához. Előfordulhat, hogy ez a konkrét termék nem felel meg az Ön igényeinek. A Pair Networks, Inc. az Ön kényelme érdekében nyújt támogatást ehhez a bemutatóhoz, és nem vállal felelősséget a jQuery teljesítményéért. Kérjük, figyelmesen olvassa el minden olyan online szolgáltatás vagy termék feltételeit és szolgáltatási körét, amelynek megvásárlását vagy használatát fontolgatja.