Skocz do zawartości


Zdjęcie

Blogger - Wyskakujące okienko


  • Zaloguj się, aby dodać odpowiedź
11 odpowiedzi w tym temacie

#1 zygmunt_ooo

zygmunt_ooo

    Początkujący

  • 11 postów

Napisano 15 08 2011 - 13:54

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) Dołączona grafika

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

  • 0

#2 Ziele

Ziele

    Biblioteka Zielińskiego

  • 1 812 postów

Napisano 15 08 2011 - 14:15

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

  • 0

#3 zygmunt_ooo

zygmunt_ooo

    Początkujący

  • 11 postów

Napisano 15 08 2011 - 14:27

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ś ;]
  • 0

#4 Ziele

Ziele

    Biblioteka Zielińskiego

  • 1 812 postów

Napisano 15 08 2011 - 14:48

Podaj link ;]
  • 0

#5 zygmunt_ooo

zygmunt_ooo

    Początkujący

  • 11 postów

Napisano 15 08 2011 - 15:09

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

#6 Ziele

Ziele

    Biblioteka Zielińskiego

  • 1 812 postów

Napisano 15 08 2011 - 15:20

<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

  • 0

#7 zygmunt_ooo

zygmunt_ooo

    Początkujący

  • 11 postów

Napisano 15 08 2011 - 20:53

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

#8 Ziele

Ziele

    Biblioteka Zielińskiego

  • 1 812 postów

Napisano 15 08 2011 - 21:05

poczytaj o pop up ^
  • 0

#9 zygmunt_ooo

zygmunt_ooo

    Początkujący

  • 11 postów

Napisano 15 08 2011 - 23:26

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 ;]
  • 0

#10 Macsch15

Macsch15

    Profesjonalista

  • 3 705 postów

Napisano 15 08 2011 - 23:36

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.
  • 0

#11 zygmunt_ooo

zygmunt_ooo

    Początkujący

  • 11 postów

Napisano 16 08 2011 - 12:09

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ść ;]

  • 0

#12 Macsch15

Macsch15

    Profesjonalista

  • 3 705 postów

Napisano 05 09 2011 - 06:29

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&amp;width=640&amp;inlineId=ContentBox
Wysokość i szerokość.

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

  • 0




Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych