Skočni prozori za najrazličitije svrhe imaju mnogo primjena u web gradnji. Pomoću njih mogu se izrađivati razne vrste izbornika, postavljati reklamni tekstovi i grafike, opisi alata prilikom popunjavanja složenih obrazaca, a prikladno je i same obrasce postaviti u prozore koji ne zauzimaju mjesto na stranici. U našem ćete članku pronaći opis kako možete napraviti takav prozor.
Nužno je
Osnovno znanje HTML-a
Upute
Korak 1
skočni prozor, html, skriveni sloj
Korak 2
Na mnogim web stranicama možete vidjeti da se za stvaranje skočnih prozora na stranicama koriste otmjene knjižnice različitih JavaScript okvira (jQuery, MooTools, Prototype itd.). Međutim, oni zapravo nisu potrebni pri rješavanju ovog određenog problema. Alati dostupni u jeziku za označavanje hiperteksta (HTML) i kaskadnim tablicama stilova (CSS) dovoljni su za stvaranje skočnih prozora. Ovako stvoreni prozori funkcionirat će bez obzira je li JavaScript omogućen u pregledniku posjetitelja.
Sav kôd koji stvara skočni prozor može se smjestiti u dva retka. Prvi redak stvara vezu na koju se mora kliknuti za prikaz skočnog prozora:
Kliknite ovdje!
Ovdje atribut onmouseover oznake veze postavlja zadani tip pokazivača miša za veze. Atribut onclick navodi da kada klikne vezu, skriveni skočni blok treba postati vidljiv.
Drugi je red zapravo skočni prozor. Sloj s PopUp identifikatorom i veličinom prozora, bojom i veličinom teksta, pozadinom i obrubom navedenim u atributu style:
Ovo je tekst u skočnom prozoru
Prema zadanim postavkama nije vidljivo - to označava birač zaslona s vrijednosti none u opisu stila sloja.
Zapravo, to je sve što vam treba za stvaranje skočnog prozora - postavite ove dvije linije između oznaka i vaše stranice i spremno je za rad.
3. korak
Da biste mogli zatvoriti skočni prozor ispred oznake, morate dodati vezu koja izvodi suprotnu radnju - skrivajući vidljivi sloj s PopUp identifikatorom:
Zatvoriti
4. korak
A ako želite da se prozor ne pojavi klikom, već lebdenjem kursora miša, tada se prvi redak s vezom mora izmijeniti na ovaj način:
pomaknite miša ovdje!
Korak 5
Sad ste upoznati s principom i strukturom koda skočnog prozora, a dizajn njegovog izgleda i sadržaja u potpunosti ovisi o vašim ciljevima i mašti.
