###
  • Programe
  • Siguranță
  • Știri
  • Interesant
  • Sfat
  • Știri
  • Recenzii

    • Fereastra modală Css într-o fereastră modală. Fereastra modală folosind css, cum se face o fereastră modală. Să ne ocupăm de lățimea

    22.07.2020 Sfat

    Ferestrele modale sunt un instrument folosit frecvent în arsenalul unui webmaster. Este foarte potrivit pentru rezolvarea unui număr mare de sarcini, cum ar fi afișarea formularelor de înregistrare, blocuri de publicitate, mesaje și așa mai departe.

    Dar, în ciuda locului lor important în suportul informațional al proiectului, ferestrele modale sunt de obicei implementate în JavaScript, ceea ce poate crea probleme la extinderea funcționalității sau la asigurarea compatibilității cu versiunea inversă.

    HTML5 și CSS3 fac incredibil de ușor să creezi ferestre modale.

    Marcaj HTML

    Primul pas către crearea unei ferestre modale este un marcaj simplu și eficient:

    Deschideți fereastra modală

    În interiorul unui element div Conținutul ferestrei modale este plasat. De asemenea, trebuie să furnizați un link pentru a închide fereastra. De exemplu, să plasăm un titlu simplu și mai multe paragrafe. Markupul complet pentru exemplul nostru ar arăta astfel:

    Deschideți fereastra modală X Fereastra modală

    Un exemplu de fereastră modală simplă care poate fi creată folosind CSS3.

    Poate fi folosit într-o gamă largă, de la afișarea mesajelor până la înregistrarea formularelor.

    Stiluri

    Creați o clasă modalDialogși începe să se formeze aspect:

    ModalDialog ( poziție: fix; font-family: Arial, Helvetica, sans-serif; sus: 0; dreapta: 0; jos: 0; stânga: 0; fundal: rgba(0,0,0,0.8); z-index : 99999; -webkit-transition: opacitate 400ms ease-in; -moz-transition: opacitate 400ms ease-in; tranziție: opacitate 400ms ease-in; afișare: niciunul; pointer-evenimente: niciunul; )

    Fereastra noastră va avea o poziție fixă, adică se va deplasa în jos dacă derulați pagina când deschide fereastra. De asemenea, fundalul nostru negru se va extinde pentru a umple întregul ecran.

    Fundalul va avea o ușoară transparență și va fi, de asemenea, plasat deasupra tuturor celorlalte elemente prin utilizarea proprietății indicele z.

    În cele din urmă, setăm tranzițiile pentru afișarea ferestrei noastre modale și o ascundem într-o stare inactivă.

    Poate nu cunoști proprietatea pointer-evenimente, dar vă permite să controlați modul în care elementele vor reacționa la clicurile mouse-ului. Setăm valoarea la valoarea sa pentru clasă modalDialog, deoarece linkul nu ar trebui să răspundă la clicurile mouse-ului când pseudo-clasa este activă ":ţintă".

    Acum adăugăm o pseudo clasă :ţintăși stiluri pentru fereastra modală.

    ModalDialog:țintă ( display: block; pointer-events: auto; ) .modalDialog > div ( lățime: 400px; poziție: relativă; margine: 10% automat; padding: 5px 20px 13px 20px; chenar-radius: 10px; fundal: # fff; fundal: -moz-linear-gradient(#fff, #999); fundal: -webkit-linear-gradient(#fff, #999); fundal: -o-linear-gradient(#fff, #999); )

    Pseudo clasă ţintă schimbă modul de afișare al elementului, astfel încât fereastra noastră modală va fi afișată atunci când se face clic pe link. Schimbăm și valoarea proprietății evenimente-pointer.

    Definim lățimea și poziția ferestrei modale pe pagină. De asemenea, definim un gradient pentru fundal și colțurile rotunjite.

    Închizând fereastra

    Acum trebuie să implementăm funcționalitatea de închidere a ferestrei. Formarea aspectului butonului:

    Închidere ( fundal: #606061; culoare: #FFFFFF; înălțimea liniei: 25px; poziție: absolut; dreapta: -12px; text-align: center; sus: -10px; lățime: 24px; text-decor: niciunul; font- greutate: bold; -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 ( fundal: #00d9ff; )

    Pentru butonul nostru setăm fundalul și poziția textului. Apoi poziționăm butonul, îl rotunjim folosind proprietatea de rotunjire a cadrului și formăm o umbră ușoară. Când treceți mouse-ul peste buton, vom schimba culoarea de fundal.

    O fereastră modală este o fereastră mică care apare pentru a spune ceva important. Este dificil să faci o fereastră modală fără Bootstrap? Să încercăm să ne dăm seama.

    Unde se introduce în DOM?

    De obicei, îl plasez înaintea etichetei de închidere a corpului.

    În principal datorită stilurilor. Este mult mai ușor să poziționați un modal în CSS atunci când aveți de-a face cu un strat care înfășoară întregul corp, mai degrabă decât cu un set necunoscut de elemente părinte care ar putea avea propria poziționare.

    Centrarea

    Iată unul dintre trucurile mele preferate în care poți centra atât pe verticală, cât și pe orizontală, fără să știi înălțimea și lățimea.

    Modal (poziție: fix; sus: 50%; stânga: 50%; transformare: traducere(-50%, -50%); )

    Acest lucru este foarte convenabil, deoarece o fereastră modală deschisă ar trebui să fie de obicei situată direct în centru, în ciuda lățimii sale. Înălțimea este și mai probabil să se schimbe, deoarece depinde de conținutul din interior.

    Poziție – fixă?

    Vă rugăm să rețineți că am folosit poziția: fixă; astfel încât utilizatorii să poată derula în jos în timp ce fereastra modală deschisă rămâne întotdeauna în mijloc. Cred, în general, că valoarea fixă ​​poate fi deja utilizată în siguranță, chiar și pe dispozitive mobile. Cu toate acestea, dacă trebuie să luați în considerare telefoanele mai vechi, încercați să înlocuiți cu absolut.

    Să ne ocupăm de lățimea

    Pe ecranele mari, o fereastră modală tipică deschisă nu este doar centrată, ci și limitată în lățime.

    Modal (lățime: 600px; )

    Cu toate acestea, există ecrane care au o lățime mai mică de 600 px. Pentru a remedia situația, să adăugăm o lățime maximă.

    Modal ( lățime: 600px; lățime maximă: 100%; )

    Înălţime

    Amenajarea unei clădiri înalte este o sarcină și mai responsabilă. Știm că conținutul tinde să se schimbe. În plus, tehnica de centrare prin transformare decupează în mod fericit marginile, fără apariția unei bare de defilare. Setarea înălțimii maxime ne va ține în siguranță a doua oară.

    Modal (înălțime: 400px; înălțime maximă: 100%; )

    Revărsare

    Acum că ne-am ocupat de înălțime, este timpul să ne uităm la proprietatea de overflow. Este obișnuit să folosiți o valoare de depășire direct în .modal, cu toate acestea, există două probleme cu aceasta:

    • Este posibil să dorim să folosim elemente care nu ar trebui să deruleze
    • Overflow va decupa umbra pe care o vom folosi.

    Aș sugera să folosiți un recipient interior:

    Având în vedere că vom avea conținut care trebuie derulat, trebuie să setăm înălțimea. Există mai multe opțiuni. Iată una dintre ele:

    Modal-guts (poziție: absolut; sus: 0; stânga: 0; lățime: 100%; înălțime: 100%; /* padding */ padding: 20px 50px 20px 20px; /* permite derularea */ overflow: automat; )

    Butoane

    Ideea utilizării ferestrelor modale este de a forța o acțiune înainte de a se face ceva. A face butonul de închidere al ferestrei vizibil în orice stare nu pare o idee rea.

    Închide

    Să ne ocupăm de întunecare

    O fereastră modală obișnuită este realizată cu un fundal complet estompat. Acest lucru este util din mai multe motive:

    • poate întuneca restul ecranului
    • poate preveni clicurile/interacțiunea cu conținutul din jurul ferestrei modale
    • Poate fi folosit ca buton de închidere gigant

    Exemplu tipic de utilizare:

    .modal ( /* tot ce am descris deja mai sus */ z-index: 1010; ) .modal-overlay ( z-index: 1000; poziție: fix; sus:0; stânga:0; lățime: 100%; înălțime: 100%;)

    Închideți cu clasa, nu deschideți cu clasa

    Am observat o apariție obișnuită în care clasa .modal este ascunsă în mod implicit, cum ar fi display: none; Apoi, pentru a deschide, adăugați clasa .modal.open (display: block;)

    Cu toate acestea, acest lucru ar putea fi rău, deoarece modalul dvs. ar putea fi afișat: flex; și afișare: bloc; o va rescrie.

    Modal ( .display: flex; ) .modal.closed (afișare: niciunul; )

    Să adăugăm JavaScript var modal = document.querySelector("#modal"), modalOverlay = document.querySelector("#modal-overlay"), closeButton = document.querySelector("#close-button"), openButton = document.querySelector( „#buton-deschidere”); closeButton.addEventListner(„clic”, function())( modal.classList.toggle(„închis”); modalOverlay.classList.toggle(„închis”); )); openButton.addEventListner(„clic”, function())( modal.classList.toggle(„închis”); modalOverlay.classList.toggle(„închis”); ));

    O fereastră modală sau pop-up (numită diferit) este una foarte comună folosită pe un site web. Scopul său principal este să producă diverse informatii(în mare parte text și cu mai multe imagini), care apare când dai clic pe orice obiect special (link, buton sau fotografie).

    În fereastra modală, în cele mai multe cazuri, pentru a economisi spațiu pe site, acestea nu sunt scrise în mod special Informații importante, de exemplu: feedback, autorizare sau .

    Există cazuri în care webmasterii doresc să atragă atenția vizitatorului asupra unui eveniment important, de exemplu: să primească bonusuri și cadouri, să participe la promoții și tombole etc., iar ferestrele modale apar fără participarea și dorința vizitatorului.

    Cineva face o fereastră modală în aceste scopuri atunci când deschide o pagină, care apare pe pagină după o anumită perioadă de timp folosind un script java, desigur, în timp ce alții doresc căi diferite lasă vizitatorul pe site-ul tău și folosește o fereastră modală la închiderea paginii, care apare în momentul în care clientul dorește să părăsească și să închidă pagina.

    Primul exemplu de fereastră modală pop-up.


    Pentru a face o fereastră modală folosind doar css, trebuie să scrieți cod html pentru obiectul care se referă la fereastra pop-up și atribuiți parametri și proprietăți în fișierul de stil pentru a afișa corect o fereastră modală frumoasă.

    .my_modal(poziție:fix;sus:0;dreapta:0;jos:0;stânga: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(poziție:relativ;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex ;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:coloană;-ms-flex-direction:coloană;flex-direction:coloană;culoare-fond:#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;font-size:1.25rem; font -greutate:500;border-bottom:1px solid #d4d4d4;).close(padding:1px 5px 0;border:1px solid #000;border-radius:50%;font-family:sans-serif;font-size: 24px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5;text-decoration:none;top:4px;right:4px;position : absolut;).close:focus,.close:hover(culoare:#000;text-decoration:none;cursor:pointer;opacitate:.75;).my_modal-body(poziție:relativ;-webkit-box-flex : 1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:15px;overflow:auto;) Deschideți fereastra modală

    Titlul ferestrei modal

    ×

    Inregistrat aici informații text fereastră modală...

    Copiați, lipiți și salvați codul de mai sus în Document text sub numele index.html și apoi deschideți-l în browser pentru a verifica funcționalitatea ferestrei modale. Aici puteți ajusta, de asemenea, aspectul ferestrei modale în funcție de designul proiectului dumneavoastră.

    De exemplu, pentru a afișa anumite informații folosesc adesea o fereastră modală cu diverse efecte de animație, care arată mult mai interesant.

    Fereastra modală când faceți clic pe un buton

    În acest exemplu, voi arăta cum să înregistrez un buton pentru a deschide o fereastră modală.
    Pentru a face acest lucru, trebuie doar să adăugăm codul pentru buton și pentru blocul ferestrei modale atribut HTML onclick și, prin urmare, apelează o funcție cu un nume specific.

    Un exemplu de buton pentru a deschide o fereastră modală (clic).

    Butonul ferestrei modale


    #overlay ( poziție: fix; sus: 0; stânga: 0; lățime: 100%; înălțime: 100%; culoare de fundal: rgba(0, 0, 0, 0,4); z-index: 999; overflow: automat; vizibilitate:ascuns; opacitate: 0; tranziție: opacitate 0,7s ease-in 0s; ) .popup (sus: 10%; stânga: 0; dreapta: 0; dimensiune font: 14px; margine: automat; lățime: 80%; lățime minimă: 200 px; lățime maximă: 600 px; poziție: absolut; umplutură: 15 px 20 px; chenar: 1 px solid # 666; culoare de fundal: #fefefe; z-index: 1000; raza chenar: 10 px; font: 14 px /18px „Tahoma”, Arial, sans-serif; box-shadow: 0 0px 14px rgba(0, 0, 0, 0.4); .close (sus: 10px; dreapta: 10px; lățime: 32px; înălțime: 32px; poziție: absolut; chenar: niciunul; chenar-rază: 50%; culoare de fundal: rgba(0, 130, 230, 0,9); casetă-umbră: 0 2px 5px 0 rgba(0, 0, 0, 0,16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); cursor: pointer; contur: niciunul; ) .close:before (culoare: rgba(255, 255, 255, 0.9); conținut: „X”; font-family : Arial, Helvetica, sans-serif; dimensiunea fontului: 14px; greutatea fontului: normal; decorarea textului: niciuna; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); ) .close:hover (culoare de fundal: rgba(180, 20, 14, 0,8); ) #overlay .popup p.zag(margin:20px 0 10px;padding:0 0 6px;color:tomato;font-size: 16px;font-weight:bold;border-bottom:1px roșie solidă;)

    Apoi copiați și lipiți codul html al ferestrei modale:

    Fereastra modală

    Prima informație text...

    A doua informație text...

    Informații text ulterioare...

    Fereastra modală

    Și, în sfârșit, scrieți înainte de script pentru a apela și a închide fereastra modală:

    var b = document.getElementById("overlay"); funcția swa())( b.style.visibility = "vizibil"; b.style.opacity = "1"; b.style.transition = "toate 0-urile de 0,7s ease-out"; ) funcția swa2())( b .style .vizibility = „ascuns”; b.style.opacity = „0”; )

    Distribuiți prietenilor și puneți întrebări dacă ceva nu funcționează atunci când creați o fereastră modală.

    În zilele noastre, pentru diverse site-uri au devenit o normă tot felul de ferestre modale pop-up - pop-up - pentru înregistrare, autorizare, ferestre de informare - de tot felul de forme și dimensiuni.Există și un număr foarte mare de plugin-uri, pe lângă jQuery , pentru crearea simplă și convenabilă a unor astfel de ferestre pop-up - aceeași Shadowbox, de exemplu.

    Aspectul, dimensiunea și designul unor astfel de ferestre pop-up sunt complet diferite - cu o suprapunere, umbre, animații - nu puteți număra totul. Singurul lucru pe care îl au în comun este, poate, faptul că sunt afișate de obicei chiar în centrul paginii - atât pe orizontală, cât și pe verticală. Și această centrare se face folosind JS. Nu voi intra în detalii despre aceste calcule, le voi descrie doar pe scurt:

    Codul HTML al unei ferestre pop-up are de obicei următoarea structură:


    ... -- Popup cu conținut -->

    Și CSS ( aici și mai jos voi omite în mod deliberat scrierea unor proprietăți care sunt necesare doar pentru unele browsere și versiunile acestora, lăsând doar cele mai elementare):

    Popup__overlay(
    poziție: fixă;
    stânga: 0;
    sus: 0;
    fundal: #000;
    opacitate: .5;
    filtru: alfa(opacitate=50);
    indicele z: 999
    }
    .pop-up(
    poziție: absolută;
    latime: 20%;
    indicele z: 1000;
    chenar : 1px solid #ccc ;
    fundal: #fff
    }

    JS determină browserul și versiunea browserului și, pe baza acesteia, calculează dimensiunea spațiului de lucru și dimensiunea pop-up-ului în sine (dacă nu sunt specificate), apoi se efectuează calcule simple ale poziției colțului său din stânga sus ( proprietăți css stânga și sus pentru .popup). Multe plugin-uri reacționează și la redimensionarea paginii, recalculând totul de fiecare dată, astfel încât pop-up-ul să fie situat exact în centrul spațiului de lucru.

    Sunt perfecționistă din fire (știu, uneori este un lucru rău) și de multe ori mă bat chiar și pe detaliile mici, încercând să îmbunătățesc și să adaug maxima extensibilitate posibilă acestor detalii, și nu m-am putut abține să nu fiu captivat de acest punct special în activitatea tuturor acestor plugin-uri. A apărut ideea că toată munca de poziționare a unui pop-up poate fi transferată de pe umerii JS pe umerii browserului însuși, adică această muncă se poate face folosind CSS.

    Asta vom face.

    Mai jos voi da un exemplu de pop-up care funcționează în toate versiunile majore ale browserelor majore. Pentru ca acesta să funcționeze corect în IE
    < div class ="popup">

    Și niște CSS:

    Popup__overlay(
    poziție: fixă;
    stânga: 0;
    sus: 0;
    latime: 100%;
    inaltime: 100%;
    indicele z: 999
    }
    .pop-up(
    }

    Dimensiuni fixe Cea mai simplă opțiune. Nu este nevoie să inventezi ceva nou:

    Pop-up (
    stânga: 50%;
    sus: 50%;
    latime: 400px;
    înălțime: 200px;
    margine-stânga : -200px ;
    margin-top: -100px
    }

    Marginile negative de jumătate din lățime și înălțime sunt banale și plictisitoare, nu este nimic original în asta. Să mergem mai departe.

    Mărimea ferestrei pop-up depinde de conținut. În primul rând, alinierea orizontală - acest lucru pare să fie mai ușor. Dacă fereastra pop-up are o lățime fixă, atunci următoarele vor fi suficiente:

    Pop-up (
    margine: auto
    }

    Acest lucru nu va afecta în niciun fel alinierea verticală și, apropo, dacă doar alinierea orizontală este suficientă pentru dvs., atunci vă puteți opri acolo, specificând o altă margine superioară a ferestrei pop-up. Dar asta nu este suficient pentru noi! Daţi-i drumul.

    Aliniere verticală. Aici devine interesant. Desigur, o emulare a unui tabel sau a unui tabel folosind display: table & display: table-cell ar putea face față acestei sarcini fără probleme, dar a face ca aceasta să funcționeze în IE mai vechi este mai costisitoare. De asemenea, tabelul dispare - din motive evidente.

    Deci, marja nu mai este necesară - nu știm dimensiunile. Să ne amintim ce proprietăți există cu efecte similare. Da, alinierea textului. Dar numai pentru elementele inline. BINE. Se pare că Dumnezeu însuși a ordonat utilizarea afișajului: inline-block - un element bloc căruia i se puteau aplica proprietăți pentru elementele inline. Cu suport pentru această proprietate în toate browserele, totul este, de asemenea, în ordine. Codul devine cam așa:

    Popup__overlay(
    poziție: fixă;
    stânga: 0;
    sus: 0;
    latime: 100%;
    inaltime: 100%;
    indicele z: 999;
    text-align: centru
    }
    .pop-up(
    display: inline -block;
    vertical-align: mijloc
    }

    Ceea ce rămâne este alinierea verticală - vertical-align va fi pentru noi. În orice altă situație ar fi, de asemenea, potrivit să folosim line-height, dar din moment ce nu avem o înălțime fixă ​​a paginii (line-height în acest context), aceasta nu poate fi folosită aici. Un truc care vine în ajutor este alinierea verticală a elementelor de dimensiuni necunoscute. Îmi amintesc exact că am găsit această metodă pe Habré, dar, din păcate, nu am găsit un link către acel subiect. Această metodă constă în următoarele: se adaugă un element de bloc inline de lățime zero și înălțimea de 100% a părintelui, care „extinde” înălțimea liniei la 100% din înălțimea părintelui, adică la înălțimea de lucru a paginii. zonă. Să facem acest lucru mai elegant - în loc de markupuri inutile, vom folosi pseudo-elemente:

    Popup__overlay :după (
    display: inline -block;
    latime: 0;
    inaltime: 100%;
    vertical-align: mijloc;
    continut: ""
    }

    Tot ce rămâne este să adăugați o estompare translucidă a suprapunerii - rgba se va ocupa de asta. Toate! Acum poziția pop-up-ului este controlată doar de instrumentele browserului la nivel CSS.

    În acest tutorial vom învăța cum să creați o fereastră modală folosind HTML5 și CSS3. În acest tutorial nu vom folosi JS, ci doar CSS3 complet. Ferestrele modale pot fi folosite pentru un formular părere, pentru fotografii și videoclipuri și există multe mai multe opțiuni pentru utilizarea acestuia.

    Să începem să facem fereastra noastră modală.

    Pasul 1: Markup HTML

    În primul rând, trebuie să facem un marcaj HTML, adică. faceți un link care va deschide o fereastră și faceți un cadru pentru fereastra noastră. Pentru a face acest lucru scriem următorul cod:

    Pasul 2. Conținutul ferestrei modale

    Acum să adăugăm conținutul ferestrei noastre. Să facem un titlu și ceva text și să punem totul într-o etichetă și să le introducem în cod în loc de puncte suspensive. De asemenea, trebuie să inserăm un link care să închidă fereastra noastră și să-i dea class="close" . Iată cum ar trebui să arate codul tău:

    PROIECT REDSTAR

    REDSTAR este un proiect dedicat problemelor care te interesează de atâta timp. Acest proiect conține lecții gratuite și articole pe diverse subiecte. Subiectele sunt foarte diverse, de la simple Instalări Windowsși terminând cu dezvoltarea site-ului web.

    Pasul 3. Stiluri

    Acum să începem să scriem stiluri pentru fereastra noastră. În acest pas ne vom face fereastra invizibilă. Va apărea doar când faceți clic pe link. Pentru a face acest lucru, scriem stiluri pentru clasa noastră modalDialog:

    ModalDialog ( poziție: fix; font-family: Arial, Helvetica, sans-serif; sus: 0; dreapta: 0; jos: 0; stânga: 0; fundal: rgba(0,0,0,0.8); z-index : 99999; opacitate:0; -webkit-transition: opacitate 400ms ease-in; -moz-transition: opacitate 400ms ease-in; tranziție: opacitate 400ms ease-in; afișare: niciunul; pointer-evenimente: niciunul; )

    Pasul 4. Funcționalitate și vizualizare

    În acest pas ne vom asigura că fereastra noastră funcționează deja. Pentru a face acest lucru, să mai adăugăm câteva stiluri pentru clasa noastră modalDialog:

    ModalDialog:target ( opacitate: 1; pointer-events: auto; display: block; ) .modalDialog > div ( lățime: 400px; poziție: relativă; margine: 10% automat; padding: 5px 20px 13px 20px; border-radius: 10px ; fundal: #fff; fundal: -moz-linear-gradient(#fff, #b8ecfb); fundal: -webkit-linear-gradient(#fff, #b8ecfb); fundal: -o-linear-gradient(#fff, #b8ecfb); )

    La acest pas vă puteți vizualiza deja fereastra, aceasta este deja funcțională. Dar butonul de închidere nu arată prea frumos.

    Acum trebuie să adăugăm stiluri pentru clasa noastră apropiată.

    Pasul 5. Realizarea unui buton de închidere

    În acest pas vom îmbunătăți aspectul butonului nostru, care ne va închide fereastra. Pentru a face acest lucru, scriem stiluri pentru clasa noastră apropiată:

    Închidere ( fundal: #606061; culoare: #FFFFFF; înălțimea liniei: 25px; poziție: absolut; dreapta: -12px; text-align: center; sus: -10px; lățime: 24px; text-decor: niciunul; font- greutate: bold; -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 (fond: #860015;)

    Ei bine, acum butonul nostru arată așa cum a fost intenționat. Ar trebui să arate așa pentru tine:

    Aceasta încheie această lecție. Vă mulțumim pentru atenție! Pentru confortul dumneavoastră, am adăugat o versiune demo și fișiere sursă. Dacă ceva nu este clar, descărcați fișierele sursă.