Css modális ablak modális ablakban. Modális ablak css használatával, modális ablak készítése. Foglalkozzunk a szélességgel

A modális ablakok gyakran használt eszközök a webmesterek arzenáljában. Nagyon jól alkalmas nagyszámú feladat megoldására, például regisztrációs lapok, reklámblokkok, üzenetek megjelenítésére stb.

De a projekt információs támogatásában betöltött fontos szerepük ellenére a modális ablakokat általában JavaScriptben implementálják, ami problémákat okozhat a funkcionalitás bővítésekor vagy a visszafelé kompatibilitás biztosításában.

A HTML5 és a CSS3 hihetetlenül egyszerűvé teszi a modális ablakok létrehozását.

HTML jelölés

A modális ablak létrehozásának első lépése az egyszerű és hatékony jelölés:

Nyissa meg a modális ablakot

Egy div elem belsejében A modális ablak tartalma el van helyezve. Az ablak bezárásához egy hivatkozást is meg kell adnia. Például helyezzünk el egy egyszerű címet és több bekezdést. Példánk teljes jelölése így néz ki:

Modális ablak megnyitása X Modális ablak

Példa egy egyszerű modális ablakra, amely CSS3 használatával hozható létre.

Az üzenetek megjelenítésétől az űrlapok regisztrálásáig széles körben használható.

Stílusok

Hozzon létre egy osztályt modalDialogés kezdenek formálódni kinézet:

ModalDialog ( pozíció: rögzített; betűcsalád: Arial, Helvetica, sans-serif; felül: 0; jobb: 0; lent: 0; bal: 0; háttér: rgba(0,0,0,0.8); z-index : 99999; -webkit-átmenet: átlátszatlanság 400 ms-os könnyű beépíthetőség; -moz-átmenet: átlátszatlanság 400 ms-os könnyű beépíthetőség; átmenet: átlátszatlanság 400 ms-os könnyű beillesztés; kijelző: nincs; mutató-események: nincs; )

Az ablakunk fix pozíciójú lesz, azaz lefelé mozog, ha mikor görgeted az oldalt nyitott ablak. Ezenkívül a fekete hátterünk kitágul, hogy kitöltse a teljes képernyőt.

A háttér enyhén átlátszó lesz, és a tulajdonság használatával az összes többi elem fölé is kerül. z-index.

Végül beállítjuk az átmeneteket a modális ablakunk megjelenítéséhez, és elrejtjük inaktív állapotba.

Lehet, hogy nem ismeri az ingatlant pointer-események, de lehetővé teszi annak szabályozását, hogy az elemek hogyan reagáljanak az egérkattintásra. Az értéket az osztály értékére állítjuk be modalDialog, mivel a hivatkozás nem reagál az egérkattintásra, ha az álosztály aktív ":cél".

Most hozzáadunk egy pszeudo osztályt :célés stílusok a modális ablakhoz.

ModalDialog:target ( kijelző: blokk; pointer-események: auto; ) .modalDialog > div ( szélesség: 400 képpont; pozíció: relatív; margó: 10% auto; kitöltés: 5px 20px 13px 20px; szegélysugár: 10px; háttér: # fff; háttér: -moz-linear-gradient(#fff, #999); háttér: -webkit-linear-gradient(#fff, #999); háttér: -o-linear-gradient(#fff, #999); )

Álosztály cél megváltoztatja az elem megjelenítési módját, így a linkre kattintva megjelenik a modális ablakunk. Az ingatlan értékét is változtatjuk pointer-események.

Meghatározzuk a modális ablak szélességét és pozícióját az oldalon. A háttér és a lekerekített sarkok színátmenetét is meghatározzuk.

Az ablak bezárása

Most végre kell hajtanunk az ablakzárási funkciót. A gomb megjelenésének kialakítása:

Bezárás (háttér: #606061; szín: #FFFFFF; vonalmagasság: 25px; pozíció: abszolút; jobbra: -12px; szövegigazítás: középre; felső: -10px; szélesség: 24px; szövegdekoráció: nincs; font- súly: félkövér; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; ) .close:hover ( háttér: #00d9ff; )

Gombunknál beállítjuk a háttér és a szöveg pozícióját. Ezután pozícionáljuk a gombot, a keret lekerekítés tulajdonságával kerekítjük, és világos árnyékot képezünk. Ha az egeret a gomb fölé viszi, megváltoztatjuk a háttér színét.

A modális ablak egy kis ablak, amely felugrik, és valami fontosat mond. Nehéz modális ablakot készíteni Bootstrap nélkül? Próbáljuk meg kitalálni.

Hová kell beilleszteni a DOM-ba?

Általában a záró body címke elé teszem.

Főleg a stílusok miatt. Sokkal egyszerűbb egy modált pozícionálni a CSS-ben, ha egy, az egész testet beborító réteggel van dolgunk, mint a szülőelemek ismeretlen halmazával, amelyek potenciálisan saját pozicionálással rendelkezhetnek.

Központosítás

Íme az egyik kedvenc trükköm, amellyel függőlegesen és vízszintesen is központosíthat anélkül, hogy tudná a magasságot és a szélességet.

Modális (pozíció: rögzített; felül: 50%; bal: 50%; átalakítás: fordítás (-50%, -50%); )

Ez nagyon kényelmes, mivel a nyitott modális ablakot általában közvetlenül a közepén kell elhelyezni, annak szélessége ellenére. A magasság még nagyobb valószínűséggel változik, mivel ez a belső tartalomtól függ.

Pozíció – rögzített?

Kérjük, vegye figyelembe, hogy használt pozíció: fix; így a felhasználók lefelé görgethetnek, miközben a nyitott modális ablak mindig középen marad. Általában azt gondolom, hogy a rögzített érték már biztonságosan használható, akár bekapcsolva is mobil eszközök. Ha azonban régebbi telefonokkal kell számolnia, próbálja meg az abszolútra cserélni.

Foglalkozzunk a szélességgel

A nagy képernyőkön egy tipikus nyitott modális ablak nemcsak középre van állítva, hanem szélességében is korlátozott.

Modális (szélesség: 600 képpont; )

Vannak azonban olyan képernyők, amelyek szélessége kisebb, mint 600 képpont. A helyzet javítása érdekében adjunk hozzá egy maximális szélességet.

Modális (szélesség: 600 képpont; maximális szélesség: 100%; )

Magasság

A sokemeletes épület felállítása még felelősségteljesebb feladat. Tudjuk, hogy a tartalom hajlamos változni. Ráadásul a transzformációs központosítási technika boldogan vágja le a széleket, görgetősáv megjelenése nélkül. A maximális magasság beállításával másodszor is biztonságban leszünk.

Modális ( magasság: 400 képpont; maximális magasság: 100%; )

Túlcsordulás

Most, hogy foglalkoztunk a magassággal, ideje megnézni a túlcsordulási tulajdonságot. Gyakori a túlcsordulási érték közvetlen használata a .modal fájlban, azonban ezzel két probléma van:

Használhatunk olyan elemeket, amelyeknek nem szabad görgetniük
A túlcsordulás levágja az általunk használt árnyékot.

Javaslom egy belső tartály használatát:

Tekintettel arra, hogy lesz olyan tartalmank, amelyet görgetni kell, be kell állítani a magasságot. Több lehetőség is van. Íme az egyik közülük:

Modal-guts (pozíció: abszolút; felül: 0; bal: 0; szélesség: 100%; magasság: 100%; /* kitöltés */ kitöltés: 20px 50px 20px 20px; /* görgetést tesz lehetővé */ túlcsordulás: automatikus; )

Gombok

A modális ablakok használatának ötlete az, hogy kikényszerítsünk valamilyen műveletet, mielőtt bármit tennénk. Nem tűnik rossz ötletnek az ablak bezárása gombjának láthatóvá tétele bármilyen állapotban.

Bezárás

Foglalkozzunk a sötétedéssel

Egy normál modális ablak teljesen elsötétített háttérrel készül. Ez több okból is hasznos:

elsötétítheti a képernyő többi részét
megakadályozhatja a kattintásokat/interakciókat a modális ablak körüli tartalommal
Óriási zárógombként használható

Tipikus használati példa:

.modal ( /* minden, amit fentebb leírtunk */ z-index: 1010; ) .modal-overlay ( z-index: 1000; pozíció: rögzített; felül: 0; bal: 0; szélesség: 100%; magasság: 100% ;)

Zárja be az órával, ne nyissa meg az órával

Észrevettem egy gyakori előfordulást, amikor a .modal osztály alapértelmezés szerint el van rejtve, mint például a display: none; Ezután a megnyitáshoz adja hozzá a .modal.open osztályt (megjelenítés: blokk;)

Ez azonban rossz lehet, mert lehet, hogy a modál a következő: flex; és kijelző: blokk; átírja.

Modal ( .display: flex; ) .modal.closed ( kijelző: nincs; )

Adjuk hozzá a JavaScriptet var modal = document.querySelector("#modal"), modalOverlay = document.querySelector("#modal-overlay"), closeButton = document.querySelector("#close-button"), openButton = document.querySelector( " #nyitás gomb"); closeButton.addEventListner("kattintás", függvény())( modal.classList.toggle("zárt"); modalOverlay.classList.toggle("zárva"); )); openButton.addEventListner("kattintás", függvény())( modal.classList.toggle("zárt"); modalOverlay.classList.toggle("zárva"); ));

A modális vagy előugró ablakok (más néven) nagyon gyakoriak a webhelyeken. Fő célja a kimenet különféle információk(többnyire szöveges és több képpel), ami akkor jelenik meg, ha rákattint egy speciális tárgyra (linkre, gombra vagy fotóra).

A modális ablakban a legtöbb esetben, hogy helyet takarítsanak meg a webhelyen, nincsenek különösebben írva fontos információ, például: visszajelzés, engedélyezés vagy .

Vannak esetek, amikor a webmesterek valamilyen fontos eseményre szeretnék felhívni a látogató figyelmét, például: bónuszok és ajándékok fogadása, promóciókban és nyereményjátékokban való részvétel stb., és modális ablakok jelennek meg a látogató részvétele és vágya nélkül.

Valaki erre a célra készít egy modális ablakot az oldal megnyitásakor, ami egy bizonyos idő elteltével természetesen java script segítségével megjelenik az oldalon, míg mások azt szeretnék különböző utak elhagyja a látogatót a webhelyén, és az oldal bezárásakor egy modális ablakot használ, amely abban a pillanatban jelenik meg, amikor az ügyfél el akarja hagyni és bezárja az oldalt.

Az első példa egy felugró modális ablakra.

Ahhoz, hogy csak css-t használva modális ablakot készítsen, írnia kell html kódot a felugró ablakra hivatkozó objektumhoz, és rendeljen hozzá paramétereket és tulajdonságokat a stílusfájlban, hogy helyesen jelenjen meg egy gyönyörű modális ablak.

.my_modal(position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.5);z-index:1050;display:none;margin:0; padding:0;).my_modal:target(display:block;overflow-y:auto;).my_modal-dialog(position:relative;width:auto;margin:10px;)@media (min-width:576px)(. my_modal-dialog(max-width:460px;margin:30px auto;)).my_modal-content(position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex ;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:#fff; -webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;)@media (min -width:768px)(.my_modal-content(-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5) ;)).my_modal-header(display:block;padding:14px 14px 4px;).my_modal-title(margin-top:0;margin-bottom:0;line-height:1.5;bet-méret:1.25rem; font -súly:500;border-bottom:1px solid #d4d4d4;).close(padding:1px 5px 0;border:1px solid #000;border-radius:50%;bet-család:sans-serif;betűméret : 24px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;átlátszatlanság:.5;text-decoration:none;top:4px;right:4px;position : abszolút;).close:focus,.close:hover(color:#000;text-decoration:none;cursor:pointer;opacitás:.75;).my_modal-body(position:relative;-webkit-box-flex : 1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:15px;overflow:auto;) Modális ablak megnyitása

Modális ablak címe

Itt regisztrálva szöveges információk modális ablak...

Másolja, illessze be és mentse el a fenti kódot ide Szöveges dokumentum index.html néven, majd nyissa meg a böngészőben a modális ablak működőképességének ellenőrzéséhez. Itt módosíthatja a modális ablak megjelenését is a projekt terve alapján.

Például bizonyos információk megjelenítésére gyakran használok egy modális ablakot különféle animációs effektusokkal, ami sokkal érdekesebbnek tűnik.

Modális ablak, amikor egy gombra kattint

Ebben a példában megmutatom, hogyan kell regisztrálni egy gombot a modális ablak megnyitásához.
Ehhez csak a gomb és a modális ablakblokk kódját kell megadnunk HTML attribútum onclick, és ezáltal meghív egy függvényt egy adott néven.

Példa egy modális ablak megnyitására szolgáló gombra (kattintás).

Modális ablak gomb

#overlay (pozíció: rögzített; felül: 0; bal: 0; szélesség: 100%; magasság: 100%; háttérszín: rgba(0, 0, 0, 0,4); z-index: 999; túlcsordulás: auto; láthatóság:rejtett; átlátszatlanság: 0; átmenet: átlátszatlanság 0,7 mp, gyorsítás 0 s; ) .popup ( fent: 10%; bal: 0; jobb: 0; betűméret: 14 képpont; margó: automatikus; szélesség: 80%; minimális szélesség: 200 képpont; maximális szélesség: 600 képpont; pozíció: abszolút; kitöltés: 15 képpont 20 képpont; szegély: 1 képpont, tömör #666; háttérszín: #fefefe; z-index: 1000; szegélysugár: 10 képpont; betűtípus: 14 képpont /18px "Tahoma", Arial, sans-serif; box-shadow: 0 0px 14px rgba(0, 0, 0, 0.4); ) .close ( felül: 10px; jobbra: 10px; szélesség: 32px; magasság: 32px; pozíció: abszolút; szegély: nincs; szegélysugár: 50%; háttérszín: rgba(0, 130, 230, 0,9); keretes árnyék: 0 2px 5px 0 rgba(0, 0, 0, 0,16), 0 2px 10px 0 rgba(0, 0, 0, 0,12); kurzor: mutató; körvonal: nincs; ) .close:before ( szín: rgba(255, 255, 255, 0,9); tartalom: "X"; font-family : Arial, Helvetica, sans-serif; betűméret: 14px; betűsúly: normál; szövegdekoráció: nincs; text-shadow: 0 -1px rgba(0, 0, 0, 0,9); ) .close:hover ( háttérszín: rgba(180, 20, 14, 0,8); ) #overlay .popup p.zag(margin:20px 0 10px;padding:0 0 6px;color:paradicsom;betűméret: 16px;betűsúly:félkövér;bordó-alsó:1px tömör paradicsom;)

Ezután másolja ki és illessze be a modális ablak html kódját:

Modális ablak

Első szöveges információ...

Második szöveges információ...

Követő szöveges információk...

Modális ablak

És végül írja be a parancsfájl elé, hogy meghívja és bezárja a modális ablakot:

var b = document.getElementById("overlay"); function swa())( b.style.visibility = "látható"; b.style.opacity = "1"; b.style.transition = "minden 0,7 s egyszerűsítés 0s"; ) function swa2())( b .style .visibility = "rejtett"; b.style.opacity = "0"; )

Ossza meg barátaival, és tegyen fel kérdéseket, ha valami nem működik a modális ablak létrehozásakor.

Napjainkban a különböző oldalakon általánossá vált mindenféle felugró modális ablak - felugró ablak - regisztrációhoz, engedélyezéshez, információs ablakok - mindenféle alakú és méretű. , az ilyen felugró ablakok egyszerű és kényelmes létrehozásához - például ugyanaz a Shadowbox.

Az ilyen felugró ablakok megjelenése, mérete és kialakítása teljesen más - átfedéssel, árnyékokkal, animációkkal - nem lehet mindent megszámolni. Az egyetlen közös bennük talán az a tény, hogy általában az oldal közepén jelennek meg – vízszintesen és függőlegesen is. És ez a központosítás JS segítségével történik. Nem részletezem ezeket a számításokat, csak röviden ismertetem őket:

Az előugró ablak HTML-kódja általában a következő szerkezettel rendelkezik:

... -- Felugró ablak tartalommal -->

És a CSS ( itt és az alábbiakban szándékosan kihagyok néhány olyan tulajdonság megírását, amelyek csak egyes böngészőkhöz és azok verzióihoz szükségesek, csak a legalapvetőbbeket hagyom meg):

Popup__overlay(
pozíció: rögzített;
balra: 0;
felső: 0;
háttér : #000 ;
átlátszatlanság: 0,5;
szűrő : alfa(átlátszatlanság=50 );
z-index: 999
}
.Felugrik(
pozíció: abszolút;
szélesség: 20%;
z-index: 1000;
keret : 1px tömör #ccc ;
háttér : #fff
}

A JS meghatározza a böngészőt és a böngésző verzióját, és ez alapján kiszámítja a munkaterület méretét és magának a felugró ablaknak a méretét (ha nincs megadva), majd egyszerű számításokat végez a bal felső sarkának helyzetéről ( css tulajdonságok balra és tetejére a .popup számára). Sok plugin reagál az oldal átméretezésére is, minden alkalommal újraszámolva az egészet, hogy az előugró ablak pontosan a munkaterület közepén legyen.

Természetemnél fogva perfekcionista vagyok (tudom, ez néha rossz dolog), és gyakran még az apró részleteken is dühöngök, igyekszem javítani és a lehető legnagyobb bővíthetőséget adni ezekhez a részletekhez, és nem tudtam nem elkapni tőle. ez a pont az összes plugin munkájában. Felmerült az ötlet, hogy a pop-up elhelyezésével kapcsolatos összes munka átkerülhet a JS válláról magának a böngészőnek a vállára, vagyis ezt a munkát CSS segítségével lehet elvégezni.

Ezt fogjuk tenni.

Az alábbiakban példát mutatok be egy felugró ablakra, amely a főbb böngészők összes fő verziójában működik. Hogy IE-ben megfelelően működjön
< div class ="popup">

És egy kis CSS:

Popup__overlay(
pozíció: rögzített;
balra: 0;
felső: 0;
szélesség: 100%;
magasság: 100%;
z-index: 999
}
.Felugrik(
}

Fix méretek A legegyszerűbb lehetőség. Nem kell semmi újat kitalálni:
Felugrik (
bal: 50%;
felső: 50%;
szélesség: 400 képpont;
magasság: 200 képpont;
margó-bal : -200 képpont ;
margó felső : -100 képpont
}

A fél szélességű és magasságú negatív margók banálisak és unalmasak, nincs benne semmi eredeti.. Menjünk tovább.
A felugró ablak mérete a tartalomtól függ.Először a vízszintes igazítás – ez egyszerűbbnek tűnik. Ha az előugró ablak fix szélességű, akkor a következők elegendőek:
Felugrik (
margó : auto
}

Ez semmilyen módon nem befolyásolja a függőleges igazítást, és egyébként, ha csak a vízszintes igazítás elég Önnek, akkor itt megállhat, megadva a felugró másik felső margóját. De ez nekünk nem elég! Menj tovább.
Függőleges igazítás. Itt válik érdekessé. Természetesen ezt a feladatot egy display: table & display: table-cell használó tábla vagy táblaemuláció gond nélkül meg tudná oldani, de a régebbi IE-ben való működése költségesebb. A táblázat is eltűnik – érthető okokból.
Tehát a margóra már nincs szükség – nem ismerjük a méreteket. Emlékezzünk arra, hogy milyen tulajdonságok vannak hasonló hatással. Igen, szövegigazítás. De csak a beépített elemekhez. RENDBEN. Úgy tűnik, maga Isten rendelte el a display használatát: inline-block - egy blokkelem, amelyre a beépített elemek tulajdonságait lehetett alkalmazni. Ha minden böngészőben támogatja ezt a tulajdonságot, minden rendben van. A kód valahogy így alakul:
Popup__overlay(
pozíció: rögzített;
balra: 0;
felső: 0;
szélesség: 100%;
magasság: 100%;
z-index: 999;
szöveg igazítása: középre
}
.Felugrik(
kijelző: inline -block;
függőleges igazítás: középen
}

Marad a függőleges igazítás – a függőleges igazítás megteszi nekünk. Minden más helyzetben szintén célszerű lenne a sormagasságot használni, de mivel nincs fix oldalmagasságunk (ebben az összefüggésben sormagasság), itt nem használható. Az egyik segítség az ismeretlen méretű elemek függőleges igazítása. Pontosan emlékszem, hogy a Habrén találtam ezt a módszert, de sajnos nem találtam linket a témához. Ez a módszer a következőkből áll: egy nulla szélességű és 100%-os szülőmagasságú soros blokkelem kerül hozzáadásra, amely a sormagasságot a szülő magasságának 100%-ára, azaz az oldal munkavégzésének magasságára „kiterjeszti”. terület. Tegyük ezt elegánsabbá – a felesleges jelölések helyett pszeudoelemeket használunk:
Popup__overlay :after (
kijelző: inline -block;
szélesség: 0;
magasság: 100%;
függőleges igazítás: középen;
tartalom : ""
}

Csak egy áttetsző tompítás marad hátra a fedőrétegen – az rgba megoldja ezt. Minden! Mostantól a felugró ablak helyzetét csak a böngészőeszközök szabályozzák CSS szinten.

Ebben az oktatóanyagban megtanuljuk, hogyan lehet modális ablakot létrehozni HTML5 és CSS3 használatával. Ebben az oktatóanyagban nem használjuk a JS-t, csak a teljes CSS3-at. Egy űrlaphoz modális ablakok használhatók Visszacsatolás, fényképekhez és videókhoz, és még sok más lehetőség kínálkozik a használatára.

Kezdjük el elkészíteni a modális ablakunkat.

1. lépés: HTML jelölés

Először is HTML jelölést kell készítenünk, pl. hozzon létre egy linket, amely megnyit egy ablakot, és készítsen keretet az ablakunkhoz. Ehhez a következő kódot írjuk:

2. lépés. A modális ablak tartalma

Most adjuk hozzá az ablakunk tartalmát. Készítsünk egy címet és egy kis szöveget, és tegyük be az egészet egy címkébe, és illesszük be a kódba a hárompontos jel helyett. Be kell szúrnunk egy hivatkozást is, amely bezárja az ablakunkat, és megadja neki a class="close" -t. Így kell kinéznie a kódodnak:
REDSTAR PROJEKT
A REDSTAR egy olyan projekt, amely olyan kérdéseknek szentelt, amelyek régóta foglalkoztatják Önt. Ez a projekt ingyenes leckéket és cikkeket tartalmaz különböző témákban. A témák nagyon változatosak, az egyszerűtől kezdve Windows telepítésekés a weboldal fejlesztéssel befejezve.

3. lépés. Stílusok

Most kezdjük el stílusokat írni az ablakunkhoz. Ebben a lépésben láthatatlanná tesszük az ablakunkat. Csak akkor jelenik meg, ha rákattint a linkre. Ehhez stílusokat írunk a modalDialog osztályunkhoz:

ModalDialog ( pozíció: rögzített; betűcsalád: Arial, Helvetica, sans-serif; felül: 0; jobb: 0; lent: 0; bal: 0; háttér: rgba(0,0,0,0.8); z-index : 99999; átlátszatlanság: 0; -webkit-átmenet: átlátszatlanság 400 ms-os könnyű beépíthetőség; -moz-átmenet: átlátszatlanság 400 ms-os könnyű beépíthetőség; átmenet: átlátszatlanság 400 ms-os könnyű beillesztés; kijelző: nincs; mutató-események: nincs; )

4. lépés: Funkcionalitás és megtekintés

Ebben a lépésben megbizonyosodunk arról, hogy az ablakunk már működik. Ehhez adjunk hozzá még néhány stílust a modalDialog osztályunkhoz:

ModalDialog:target ( átlátszatlanság: 1; pointer-events: auto; display: block; ) .modalDialog > div ( szélesség: 400px; pozíció: relatív; margó: 10% auto; kitöltés: 5px 20px 13px 20px; szegélysugár: 10px ; háttér: #fff; háttér: -moz-linear-gradient(#fff, #b8ecfb); háttér: -webkit-linear-gradient(#fff, #b8ecfb); háttér: -o-linear-gradient(#fff, #b8ecfb);)

Ennél a lépésnél már megtekintheti az ablakát, az már működik. De a bezárás gomb nem néz ki túl jól.

Most stílusokat kell hozzáadnunk a szűk osztályunkhoz.

5. lépés: Bezárás gomb készítése

Ebben a lépésben javítjuk gombunk megjelenését, amely bezárja az ablakunkat. Ehhez stílusokat írunk a szűk osztályunkhoz:

Bezárás (háttér: #606061; szín: #FFFFFF; vonalmagasság: 25px; pozíció: abszolút; jobbra: -12px; szövegigazítás: középre; felső: -10px; szélesség: 24px; szövegdekoráció: nincs; font- súly: félkövér; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; ) .close:hover (háttér: #860015;)

Nos, most úgy néz ki a gombunk, ahogyan tervezték. Önnek így kell kinéznie:

Ezzel a lecke véget is ért. Köszönöm a figyelmet! Az Ön kényelme érdekében hozzáadtam egy demó verziót és forrás fájlok. Ha valami nem világos, töltse le a forrásfájlokat.