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%)
-----

Dzięki wielkie za dotychczasową pomoc.


Napotkałem dalsze problemy niestety nadal okienko nie jest takie jak powinno być ponieważ ono się nie wyswietla tak jakby ala alert że oddzielnie od strony tylko poprostu jest normalnie div na stronie tak samo np. wraz z przesuwaniem strony suwakiem w dół to okienko powinno też "zjeźdzać".

Mam też problem ze mianą szerokosci okienka zmieniam w style.css width i nic się nie dzieje podejrzewam, że gdzies w kodzie JS jest to blokowane.

Okienko u mnie wygląda tak: (po dodaniu już do serwisu tam gdzie miało się znajdować):
(IMG:http://iv.pl/images/34573298295357607025_thumb.jpg)


Chciałbym cos w tym stylu:
(IMG:http://iv.pl/images/37394378756055086468_thumb.jpg)

Proszę dalej o pomoc

Ten post edytował Azonic 20.04.2014, 14:58:24
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: 13.10.2025 - 01:11
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn