Jak zrobić ładne pływające okno
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.
- Zacznij od pobrania paczki (21kB ZIP) zmodyfikowanej biblioteki. Paczka zwiera dwa pliki: jquery.js i st.css
- Rozpakuj jej zawartość do katalogu zawierającego pliki strony.
- 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>