Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript][CSS] Wyskakujące okienko
Azonic
post
Post #1





Grupa: Zarejestrowani
Postów: 26
Pomógł: 0
Dołączył: 19.04.2014

Ostrzeżenie: (0%)
-----

Witam witam natomiast mam pewien problem chciałbym stworzyć ciekawe okienko wyskakujące po wejsciu na strone i nie chodzi mi tu cos typu alert w JS.

Mam pewien kod.


Plik index.html
[PHP] pobierz, plaintext 
  1. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
  2. <head>
  3. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.         <link rel="Stylesheet" type="text/css" href="style.css" />
  5. 	<title>index</title>
  6. 	<meta name="author" content="admin" />
  7.  
  8. </head>
  9. <body bgcolor="black">
  10.  
  11. <div id='dial' class='klasa'><em>TRESC WYSKAKUJACEGO OKIENKA</em></div>
  12.  
  13.  
  14. </body>
  15. </html>
  16. <script language="JavaScript" type="text/javascript">                 
  17.  
  18. <!--
  19. *  Pokaż okno dialogowe
  20.  *  @param what - klasa diva do otwarcia, np '.okno'
  21.  *  @param w - szerokość okna w pikselach
  22.  */
  23. function showdial(what, w) {
  24.     var wd = $(window).width();
  25.     var hg = $(window).height();
  26.     // przesuwamy okno do środka
  27.     $('.'+what).css({width:w});
  28.     var dialLeft = (wd/2) - ($("."+what).width()/2);
  29.     var dialTop = 50;
  30.     // dial_over to id diva przyciemnionego tła,
  31.     // uniemożliwia ono interakcję z innymi elementami strony.
  32.     $('#dial_over').css({height:hg, width:wd}).show();
  33.     $('.'+what).css({left:dialLeft,top:dialTop}).show();
  34. }
  35.  
  36. /**
  37.  *  Zamknij okno
  38.  *  @param co - klasa diva do zamknięcia.
  39.  */
  40. function kill(co) {
  41.     $('#dial_over').hide();
  42.     $('.'+co).hide();
  43. }</SCRIPT>
[PHP] pobierz, plaintext



Tutaj mam plik style.css
[HTML] pobierz, plaintext 
  1. #dial_over {
  2.     width:100%;
  3.     height:100%;
  4.     /* przezroczystość */
  5.     filter:alpha(opacity=50);
  6.     -moz-opacity:0.5;
  7.     -khtml-opacity:0.5;
  8.     opacity:0.5;
  9.     background:#000;
  10.     position:absolute;
  11.     left:0px;
  12.     top:0px;
  13.     z-index:100;
  14.     display:none;
  15. }
  16.  
  17. #dial {
  18.     background:#fff;
  19.     /* cień pod oknem */
  20.     -moz-box-shadow:1px 1px 5px #555;
  21.     -webkit-box-shadow:1px 1px 5px #555;
  22.     box-shadow:1px 1px 5px #555;
  23.     display:none;
  24.     top:30px;
  25.     z-index:200;
  26.     position:absolute;
  27.     /* zaokrąglone rogi, nie działają w IE */
  28.     -o-border-radius: 5px;
  29.     -webkit-border-radius: 5px;
  30.     -moz-border-radius: 5px;
  31.     border-radius: 5px;
  32.     text-align: left;
  33. }
[HTML] pobierz, plaintext


Niestety po wejsciu na strone nic się nie pojawia prosze pomoc z góry dziękuje.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Azonic
post
Post #2





Grupa: Zarejestrowani
Postów: 26
Pomógł: 0
Dołączył: 19.04.2014

Ostrzeżenie: (0%)
-----

Czy ta linijka w <body> nie odpowiada za wywołanie okienka?

[PHP] pobierz, plaintext 
  1. <div id='dial' class='klasa'><em>TRESC WYSKAKUJACEGO OKIENKA</em></div>
[PHP] pobierz, plaintext
Go to the top of the page
+Quote Post
kujol
post
Post #3





Grupa: Zarejestrowani
Postów: 324
Pomógł: 27
Dołączył: 21.07.2013

Ostrzeżenie: (0%)
-----

Cytat(Azonic @ 20.04.2014, 10:45:44 ) *
Czy ta linijka w <body> nie odpowiada za wywołanie okienka?

[PHP] pobierz, plaintext 
  1. <div id='dial' class='klasa'><em>TRESC WYSKAKUJACEGO OKIENKA</em></div>
[PHP] pobierz, plaintext


nie, ta linijka to twoje okienko, które musisz wywołać

[HTML] pobierz, plaintext 
  1. showdial('.klasa', '200');
[HTML] pobierz, plaintext


Ten post edytował kujol 20.04.2014, 09:58:06
Go to the top of the page
+Quote Post

Posty w temacie
- Azonic   [JavaScript][CSS] Wyskakujące okienko   19.04.2014, 23:39:44
- - Turson   Dobra, masz funkcję ale trzeba ją gdzieś wywołać   19.04.2014, 23:42:43
- - Azonic   Czy ta linijka w <body> nie odpowiada za wyw...   20.04.2014, 09:45:44
|- - kujol   Cytat(Azonic @ 20.04.2014, 10:45:44 )...   20.04.2014, 09:55:55
- - Azonic   Dzięki wielkie za aktywną pomoc lecz nie mogę ciąg...   20.04.2014, 10:13:55
- - Turson   Kod<script language="JavaScript"> ...   20.04.2014, 10:45:12
- - Azonic   Próbowałem też i w taki sposób doinstalowałem nawe...   20.04.2014, 11:41:15
- - Turson   Nie language="JavaScript" a language=...   20.04.2014, 11:43:29
- - Azonic   Zmieniłem tak jak napisałes otworzyłem konsole mam...   20.04.2014, 11:52:44
- - Turson   <body bgcolor="black" onload="sh...   20.04.2014, 12:04:19
- - Azonic   Edytowałem dalej nic a w konsoli nowy bład: Synta...   20.04.2014, 12:08:11
- - Turson   Sprawdzałem, działa [HTML] pobierz, plaintext ...   20.04.2014, 12:15:06
- - Azonic   Dzięki pojawiło się tylko że z kodu wynika że okno...   20.04.2014, 12:24:33
- - Turson   zamiast /* przezroczystość */ filter:alpha(opacit...   20.04.2014, 12:26:04
- - Azonic   Dzięki wielkie za dotychczasową pomoc. Napotkał...   20.04.2014, 14:53:30
- - trueblue   #dial i #dial_over position:fixed; Drugi argument ...   20.04.2014, 15:04:33
- - Azonic   @trueblue dzięki za pomoc pomogło Teraz tylko z...   20.04.2014, 15:21:45
- - trueblue   A wyświetla się półprzezroczysta maska #dial_over?   20.04.2014, 15:58:38
- - Azonic   Właśnie się nie wyświetla a dokładnie o nią mi cho...   20.04.2014, 16:06:18
- - trueblue   Bo nie masz jej w html. Dodaj pod divem dial: [HTM...   20.04.2014, 16:18:09
- - Azonic   Ok wszysto działa dziękuje bardzo bez was bym nie ...   20.04.2014, 16:22:54
- - trueblue   Przed wyświetleniem okienka sprawdzać czy istnieje...   20.04.2014, 16:51:06
- - Azonic   Troche mam problem z tym bo nie wiem co jest zbytn...   20.04.2014, 20:07:08
- - Turson   tu tworzy cookie createCookie( 'bCookiesNotice...   20.04.2014, 20:15:00
- - Azonic   Proszę o dalszą pomoc ponieważ cięzko mi się z tym...   20.04.2014, 23:17:06

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 18.10.2025 - 11:04
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn