Da bi ste potpuno razumeli ovaj tutorijal podrazumeva se da znate HTML i CSS.
Prvo ćemo da ubacimo link do Jquery-a u head :
[html]
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
[/html]
Dakle počećemo sa HTML-om, postavićemo jedan div sa imenom popup, i u njega ćemo ubaciti neki sadržaj
[html]
<div id=”popup><p>Ovo je moj popup</p>
<span class=”close”>X</span>
</div>
[/html]
Dakle sada smo ubacili u html, ono što nam treba, sada ćemo sa CSS-om da mu damo neki izgled i da ga pozicioniramo:
[css]
#popup {
top: 200px; // Udaljenost od gornje margine
position: relative;
margin-left: auto;
margin-right: auto;
width: 180px;
height: auto; // Visinu smo stavili na auto, ako ima više sadržaja ono će samo da se proširi
opacity: 0.9; // Providnost
font-family: Comic Sans MS; // Font koji će da bude korišćen u popup-u
font-size: 14px;
color: #979797;
background-color: #000;
border-radius: 5px;
padding: 20px;
display: none; // Obavezno, jer ne želimo da se popup pojavi odma čim se loaduje stranica
z-index: 100 // Mora imati najveći z-index na stranici da bi bio u prvom planu
}
#popup p {
padding: 5px; // Udaljenost p elementa od ivica
}
.close {
position: absolute;
top: 5px;
right: 5px;
color: #fff;
}
[/css]
Sada možemo odraditi jedan link i kada se klikne na njega popup će da iskoči:
[html]
<div class=”start”>Click me and i will popup</div>
[/html]
Dakle, napravili smo jedan običan link koji će aktivirati ovaj naš popup.
Sve smo odradili što se tiče HTML-a i CSS-a, ajde sada da predjemo na Jquery:
[javascript]
// Izbacuje popup klikom na link
$(document).ready(function() {
$(“.start”).click(function() {
$(“#popup”).show(0);
});
});
// Zatvara popup klikom na X
$(function() {
$(“.close”).click(function() {
$(“#popup”).hide(0);
});
});
[/javascript]
Razlog zbog cega sam koristio .ready za početnu funkciju je što ja više volim tako, da funkcija bude aktivna za klik tek kad brauzer završi sa obradom celog dokumenta
ja lično više tako volim, a vi kako vam se svidja, neki kažu da nema potrebe ubacivati .ready, ali ja sam navikao tako da ga stalno ubacujem.