Skočni prozori za najrazličitije svrhe imaju mnogo primjena u web konstrukciji. Pomoću njih mogu se kreirati razne vrste menija, postavljati reklamni tekstovi i grafike, opisi alata prilikom popunjavanja složenih obrazaca, a prikladno je i same obrasce postaviti u prozore koji ne zauzimaju prostor na stranici. U našem članku pronaći ćete opis kako možete napraviti takav prozor.
Neophodno je
Osnovno znanje HTML-a
Instrukcije
Korak 1
skočni prozor, html, skriveni sloj
Korak 2
Na mnogim web stranicama možete vidjeti da se fensi biblioteke različitih JavaScript okvira (jQuery, MooTools, Prototype, itd.) Koriste za stvaranje skočnih prozora na stranicama. Međutim, oni zapravo nisu potrebni pri rješavanju ovog određenog problema. Alati dostupni u jeziku za označavanje hiperteksta (HTML) i kaskadnim tabelama stilova (CSS) dovoljni su za stvaranje skočnih prozora. Ovako stvoreni prozori će raditi bez obzira je li JavaScript omogućen u pregledaču 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 da bi se prikazao skočni prozor:
Kliknite ovdje!
Ovdje atribut onmouseover oznake veze postavlja zadani tip pokazivača miša za veze. Atribut onclick navodi da kada se klikne na vezu, skriveni PopUp blok treba postati vidljiv.
Drugi je red zapravo iskačući 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
Podrazumijevano nije vidljivo - to pokazuje selektor zaslona s vrijednosti none u opisu stila sloja.
Zapravo, ovo 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.
Korak 3
Da biste mogli zatvoriti skočni prozor ispred oznake, morate dodati vezu koja izvodi suprotnu radnju - skrivajući vidljivi sloj s PopUp identifikatorom:
blizu
Korak 4
A ako želite da prozor iskoči ne klikom, već lebdenjem kursora miša, tada se prvi redak s vezom mora izmijeniti na ovaj način:
pomaknite miša ovdje!
Korak 5
Sada 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.
