Blogger - Wyskakujące okienko

Witam chciałbym dodać do swojego bloga na blogger.com taki skrypt z wyskakującym okienkiem podczas ładowania się strony razem z tym po jakim czasie ma sie ono pojawiać, chyba nazywa sie to dokładnie "modal dialog", z tego co patrzyłem to by mi najbardziej odpowiadało. Próbowałem coś kombinować z różnymi skryptami itd. ale nie bardzo mi wychodziło

Ogólnie chodzi mi o taki efekt lub lepszy w miarę możliwości (im lepszy wizualnie tym lepiej oczywiście)

Najbardziej satysfakcjonowało mnie gdyby ktoś podał mi kod i mniej więcej powiedział gdzie mogę dodać np. obrazek tła i ustalić po jakim czasie ma się pojawiać to okienko.

Pozdrawiam i z góry graty.

Użytkownik zygmunt_ooo edytował ten post 15 08 2011 - 13:56

No i w czym problem? Ściągnij to i już ^

Tylko właśnie tam nie ma kodu do tego okienka albo ja go nigdzie nie widze, tylko jest do tego jakby formularza czy coś

Podaj link

To link do tej strony: http://jqueryui.com/demos/dialog/#modal

<meta charset="utf-8">													<script>	$(function() {		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!		$( "#dialog:ui-dialog" ).dialog( "destroy" );			$( "#dialog-modal" ).dialog({			height: 140,			modal: true		});	});	</script><div class="demo"><div id="dialog-modal" title="Basic modal dialog">	<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p></div><!-- Sample page content to illustrate the layering of the dialog --><div class="hiddenInViewSource" style="padding:20px;">	<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>	<form>		<input value="text input" /><br />		<input type="checkbox" />checkbox<br />		<input type="radio" />radio<br />		<select>			<option>select</option>		</select><br /><br />		<textarea>textarea</textarea><br />	</form></div><!-- End sample page content --></div><!-- End demo --><div class="demo-description"><p>A modal dialog prevents the user from interacting with the rest of the page until it is closed.</p></div><!-- End demo-description -->

Użytkownik Ziele edytował ten post 15 08 2011 - 15:21

Ten kod juz widziałem i dodawałem na bloga, ale to jest właśnie ten formularz a nie "wyskakujace okienko"....

poczytaj o pop up ^

Tak jak na tym filmiku do tej pory mam taki tylko zwykły komunikat szary, a mi chodzi o wstawienie takiego własnie jak ten gosc pokazał na filmiku, ten ładniejszy wizualnie

http://jqueryui.com/demos/dialog/modal-message.html
+
view-source:http://jqueryui.com/demos/dialog/modal-message.html

Umiesz chociaż w jakimś stopniu html? Jak tak, to poradzisz sobie dostosować to na swoją strone.

Jak juz pisałem, dodawałem ten właśnie kod na mojego bloga (wszystko w dobrych miejscach) i pokazuje mi się ten jakby formularz, lecz nie ukazuje mi się ten komunikat, który podałeś mi przykładowo: http://jqueryui.com/demos/dialog/modal-message.html tj. "Download Complete", zatem proszę o pomoc i cierpliwość

Ok... Pobierasz jQuery (o ile Twój silnik już nie ma jego) -> http://code.jquery.com/jquery-1.6.2.min.js i zapisujesz jako jquery.js
Następnie dodajesz go do kodu:

<script type="text/javascript" src="ŚCIEŻKA/jquery.js"></script>

Następnie pobierasz thickboxa -> http://jquery.com/demo/thickbox/thickbox-code/thickbox-compressed.js
Razem z CSS i grafką:
CSS: http://jquery.com/demo/thickbox/thickbox-code/thickbox.css
Grafika: http://jquery.com/demo/thickbox/images/loadingAnimation.gif

Zapisujesz go jako thickbox.js i thickbox.css dodajesz do kodu:

<script type="text/javascript" src="ŚCIEŻKA/thickbox.js"></script>
<link rel="stylesheet" href="ŚCIEŻKA/thickbox.css" type="text/css" />

Żeby uruchomić okno używasz kodu np:

<input alt="#TB_inline?height=480&amp;width=640&amp;inlineId=ContentBox" title="Tytuł" class="thickbox" type="button" value="Przycisk" />
<div id="ContentBox" style="display: none">
TREŚĆ KTÓRA MA SIĘ WYŚWIETLIĆ W OKNIE
</div>

Zwróć uwagę na parametry w URL:
#TB_inline?height=480&width=640&inlineId=ContentBox
Wysokość i szerokość.

Przykłady: http://jquery.com/demo/thickbox/