Oficjalne forum pomocy serwisu PUN.pl

QxV

Użytkownik

Dołączył: 2013-02-21

Liczba postów: 10

[jQuery] Prosty PopUp

Przed chwilą napisałem prosty skrypt na popup w jQuery.

Na początek dodajemy do kodu css taką oto linijkę:

#popup {position: absolute; display: none; background: X; border-style: solid; width: Y; height: Z;}

X - kolor tła
Y - szerokość okienka
Z - wysokość okienka

Potem tworzymy pustego div'a w stopce.

<div id="popup"></div>

Następnie zamieszczamy bibliotekę jQuery i wstawiamy do stopki/ogłoszenia ten kod:

<script>
jQuery(function(){

jQuery(".popup").mouseover(function(){

var tresc = jQuery(this).attr("name");

jQuery("#popup").html(tresc);

jQuery("#popup").fadeIn();

}).mouseout(function(){

jQuery("#popup").fadeOut();

}).mousemove(function(e){

jQuery("#popup").css('left', e.pageX+10);

jQuery("#popup").css('top', e.pageY+10);

});

})
</script>

No i rusztowanie gotowe, teraz pora na resztę. Tam, gdzie chcemy użyć naszego skryptu, musimy zrobić dwie rzeczy. Po pierwsze dodać klasę popup do danego elementu i atrybut name, w którym zamieścimy treść okienka.. Np.

<img src="obrazek.png" class="popup" name="Przykładowy tekst ;)"/>

I gotwe!

Miłego użytkowania.

PS. Radzę pobawić się kodem css w celu upiększenia okienka, albowiem obecna wersja wygląda co najmniej topornie.

Ostatnio edytowany przez QxV (2013-02-22 02:14:05)