Jak zrobić ładne pływające okno

Z ToProste
Skocz do: nawigacji, wyszukiwania

Nie da się ukryć, że to proste pływające okno jest mało efektowne, choć może znaleźć zastosowanie i swoich zwolenników.

W tym artykule przedstawię pływające okno - pop-up , oparte o modyfikację impromptu biblioteki jquery, dzięki której okno jest efektowniejsze i również nie da się go zablokować w przeglądarkach.

  1. Zacznij od pobrania paczki (21kB ZIP) zmodyfikowanej biblioteki. Paczka zwiera dwa pliki: jquery.js i st.css
  2. Rozpakuj jej zawartość do katalogu zawierającego pliki strony.
  3. W kod strony w sekcji nagłówka (<head> ... </head>) wstaw poniższy kod


Pływające okno - kod

<link media="screen" rel="stylesheet" type="text/css" href="st.css" /> <!-- Zalaczenie arkusza stylu biblioteki -->
<script type="text/javascript" src="jquery.js"></script> <!-- Zalaczenie funkcji zawartych w bibliotece -->
 
<script type="text/javascript"> <!-- Wywolanie okna -->
 $(window).load(function() {
 $.prompt("Treść okna",{ overlayspeed: 5 });
 });
</script>


Opis

Ciąg znaków Treść okna możesz zastąpić swoim tekstem lub dowolnym kodem HTML, pamiętaj tylko aby zamienić cudzysłów ( " ) na apostrof ( ' ), tak jak na przykładzie załączonym niżej.

Wstawienie w okno obrazu będącego odnośnikiem:

 $.prompt("<a title='Tyuł' href='http://url_linku' target='_blank'><img src='http://url_img' border='0' /></a>",{ overlayspeed: 5 });

O wyglądzie okna decydują definicje stylów w st.css, które można dowolnie modyfikować. Więcej informacji o możliwościach i dodatkowych funkcjach znajdziesz na http://trentrichardson.com/Impromptu.

Zobacz też

<htmlet>zobacz-tez</htmlet>