Kliknite tukaj, da si ogledate profil, kot ga vidijo drugi

Animirano pojavno okno

Delite vsebino na Facebooku
Delite vsebino na Twitterju
  V tej lekciji vam bom pokazal, kako na spletno stran vključiti animirano pojavno okno z poljubno vsebino.
 
 
1
 
 
Najprej prenesi zmaga_vodic.rar datoteko.
 
 
2
 
 
V prenešenem paketu boste našli jQuery knjižnico (jquery-1.4.4.min.js), skripto za pojavno okno (jquery.reveal.js), css datoteko za urejanje stila (reveal.css) in še sliko za ozadje (modal-gloss.png).

Vsebino paketa razpakiraj v mapo svoje spletno strani.
 
 
3
 
 
Odpri Dreamweaver in tvojo spletno stran.

V glavo spletne strani vključi povezave do prej prenešenih datotek:

<link rel="stylesheet" href="reveal.css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.reveal.js" type="text/javascript"></script>

Če se spletna stran nahaja v kakšni drugi mapi kot prenešene datoteke, boš v zgornji kodi moral dodati pot do njihove lokacije.

Npr:  href="css/reveal.css">
 src="js/jquery.reveal.js"
 itd.

Pri čemer sta css in js mapi v kateri se nahajajo datoteke.
 
 
4
 
 
V spodnji kodi boš določil kaj bo pisalo v pojavnem oknu. 

<div id="myModal" class="reveal-modal">
     <h1>Naslov</h1>
     <p>Vsebina pojavnega okna.</p>
     <a class="close-reveal-modal">&#215;</a>
</div>

Vsebino spreminjaš lahko kakorkoli želiš.

Vsebino pa spremeni v primeru, če imaš na spletni strani več povezav s pojavnim oknom. 

Npr: MyModal1, MyModal2, itd.

Zgornjo kodo kopiraš tik pred </body>.
 
 
 
 
 
5
 
 
Naslednja koda pa določa povezavo, katera odpre pojavno okno.

<a href="#" data-reveal-id="myModal">Klikni tukaj za test!</a>

Vsebino spreminjaš lahko kakorkoli želiš.

Vsebino pa spremeni v primeru, če imaš na spletni strani več povezav z pojavnim oknom. Pazi, da se želena povezava in pojavno okno ujemata. Oba morata imeti enak "myModal"!

Kodo vstavi kamorkoli v tvoj dokument in ga shrani.
 
 
6
 
 
Odpri spletno stran v brskalniku in klikni na povezavo...
 
 
7
 
 
In tukaj je tvoje pojavno okno.
 
 
Komentiraj
 
 
 
 
 
4.3.2012, 0:45
Zelo koristna lekcija, to sem iskal dolgo časa
 
 
 
 
4.3.2012, 20:30
Opažam da je vodič na nekaterih mestih nelogičen, saj barve s katerimi sem barval kodo, da bi olajšal razumljivost, niso pravilno prikazane.

Se opravičujem!

V primeru karšnekoli nejasnosti z veseljem odgovorim na vprašanja.
 
 
 
 
26.6.2015, 11:44
Ne odpre mi. Na koncu zraven o-meni.html napiše še #.
 
Prijava in registracija
 
 
 
Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, vas na enkraten način spozna z različnimi svetovnimi jeziki, s podrobno obrazloženimi recepti prikaže čare kulinarike in vam prežene strahove pred domačimi opravili.
 
 
Poleg tega lahko prebirate poučne članke, ki so namenjene širjenju naše splošne razgledanosti ter preverite svoje znanje z priljubljenim in enostavnim sistemom za preverjanje znanja. Če med vsebinami, ki se dodajajo vsak dan, ne najdete želenega znanja, je za vaša vprašanja na voljo dobro obiskan forum, kjer lahko tudi aktivno sodelujete. V primeru, da bi radi svoje praktično znanje delili z ostalimi, pa to lahko storite preko preprostega vmesnika za dodajanje vsebin. Zmagajte z znanjem z Zmaga.com!