Pop-up (modális) ablakban HTML és CSS

előző ◈ a következő

Mutatja a fontos üzeneteket, vagy csak a változásokat a honlapon, akkor a pop-up ablak. Pop-up ablakok két fajtája van: normál és a modális.

Megjegyzés: modális ablakok eltérnek a normális, hogy míg a modális ablak nyitva van, a felhasználó nem tud lépni a többi elem a helyén, amíg amíg be nem zárja a modális ablakot.

felugró ablakban

Az első lépés létre egy pop-up ablak, hogy hozzon létre egy elemet

(Vagy más elem), és a design:

ezt

és ez lehet használni, mint egy pop-up ablak. Most elrejteni a display tulajdonság none, és adjunk hozzá egy linket, ha rákattint, akkor a pop-up ablak:

A pszeudo-osztály: cél döntünk és stílusokat alkalmazni olyan elem, amelyet végeztek átmenet. Így, miután az átmenet az érték a referencia-kijelzőelem

változás sem a blokk.

Most kell, hogy gondoskodjon

Az oldal közepén, úgy nézett ki, mint egy pop-up ablak. Legyen teljesen pozícióját és középre vízszintesen és függőlegesen:

A következő lépés az lesz, hogy végre egy rejtett ablakban bárhol az oldalon, vagy magát az ablakot. Ehhez meg kell helyezni az elemet

az elem belsejében :

Aztán helyezze elem és nyúlik az egész szélességét és magasságát az ablakon. Kérve őt, hogy a display: none; és átirányítja a linket hozzá:

egy elem

távolítsa el a display: none; (Ez már nem szükséges, mivel most bujkál ). Ennek eredményeként, a szülő Most végez elrejtése felugró átirányításával kiválasztása oldalt.

A teremtés egy egyszerű pop-up ablak befejeződött.

modális ablak

Ahhoz, hogy hozzon létre egy felugró ablak modális, hogy az elem

. legalizálni, és adjunk hozzá a link, ha rákattintunk, akkor megjelenik:

A következő lépés létre egy teljes értékű modális ablak lesz hozzá egy gombot, amely will hide az ablakunk. Gomb készült hagyományos kapcsolatok, hozzátéve, hogy a mi