Hüpikakendel, mida kasutatakse mitmesugustel eesmärkidel, on veebiehituses palju võimalusi. Nende abil saab luua mitmesuguseid menüüsid, paigutada reklaamtekste ja graafikat, keerukate vormide täitmisel näpunäiteid ning vorme endid on mugav paigutada akendesse, mis lehel ruumi ei võta. Meie artiklist leiate kirjelduse, kuidas saate sellist akent teha.
See on vajalik
Põhiteadmised HTML-ist
Juhised
Samm 1
hüpikaken, HTML, peidetud kiht
2. samm
Paljudel veebilehtedel näete, et lehtede hüpikakende loomiseks kasutatakse mitmesuguste JavaScripti raamistike (jQuery, MooTools, Prototype jne) uhkeid teeke. Kuid tegelikult pole need selle konkreetse probleemi lahendamisel vajalikud. Hüpertekstide märgistuskeeles (HTML) ja kaskaadstiililehtedes (CSS) saadaolevad tööriistad on hüpikakende loomiseks piisavad. Sel viisil loodud aknad töötavad olenemata sellest, kas JavaScripti lubamine on külastaja brauseris lubatud.
Kogu hüpiku loova koodi saab paigutada kahele reale. Esimene rida loob lingi, millele tuleb hüpikakna kuvamiseks klõpsata:
Kliki siia!
Siin määrab lingimärgendi onmouseover atribuut hiirekursori vaiketüübi linkide jaoks. Atribuut onclick täpsustab, et kui lingil klõpsatakse, peaks peidetud PopUp-plokk muutuma nähtavaks.
Teine rida on tegelikult hüpikaken. Kiht PopUpi identifikaatori ja akna suuruse, stiili atribuudis määratud teksti, värvi ja teksti, tausta ja äärise suurusega:
See on hüpikaknas olev tekst
Vaikimisi pole see nähtav - seda näitab ekraanivalija, mille kihi stiilikirjelduses pole väärtust.
Tegelikult on see kõik, mida vajate hüpikakna loomiseks - asetage need kaks rida siltide ja oma lehe vahele ja see on kasutamiseks valmis.
3. samm
Sildi ees oleva hüpikakna sulgemiseks peate lisama lingi, mis täidab vastupidist toimingut - peidab nähtava kihi PopUp-identifikaatoriga:
Sulge
4. samm
Ja kui soovite, et aken ei ilmuks mitte klõpsamise, vaid hiirekursori hõljutamise abil, tuleb esimest linki rida muuta nii:
liiguta hiir siia!
5. samm
Nüüd olete hüpikakna koodi põhimõtte ja struktuuriga tuttav ning selle välimuse ja sisu kujundus sõltub täielikult teie eesmärkidest ja kujutlusvõimest.
