Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

2 Stron V   1 2 >  
 Reply to this topicStart new topic
> [JavaScript][CSS] Wyskakujące okienko
Azonic
post 19.04.2014, 23:39:44
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
Turson
post 19.04.2014, 23:42:43
Post #2





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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

Dobra, masz funkcję ale trzeba ją gdzieś wywołać smile.gif
Go to the top of the page
+Quote Post
Azonic
post 20.04.2014, 09:45:44
Post #3





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 20.04.2014, 09:55:55
Post #4





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
Azonic
post 20.04.2014, 10:13:55
Post #5





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

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

Dzięki wielkie za aktywną pomoc lecz nie mogę ciągle sie z tym uporać

wstawiłem w body:
[PHP] pobierz, plaintext 
  1. 	 <script language="JavaScript">
  2.  function showdial 
  3.  {
  4.  showdial('.klasa', '200');
  5.  }
  6.  </script>
[PHP] pobierz, plaintext



oraz próbowałem też w taki sposób:
[PHP] pobierz, plaintext 
  1.  <script language="JavaScript"> 
  2. 	 function  showdial('.klasa', '200');
  3. 	 </script>
[PHP] pobierz, plaintext


Pozdrawiam

Ten post edytował Azonic 20.04.2014, 10:14:15
Go to the top of the page
+Quote Post
Turson
post 20.04.2014, 10:45:12
Post #6





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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

Kod
<script language="JavaScript">
showdial('.klasa', '200');
</script>
Go to the top of the page
+Quote Post
Azonic
post 20.04.2014, 11:41:15
Post #7





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

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

Próbowałem też i w taki sposób doinstalowałem nawet jquery i dodałem kod:
[PHP] pobierz, plaintext 
  1.  <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
[PHP] pobierz, plaintext


Nie działa


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


Ten post edytował Azonic 20.04.2014, 11:56:06
Go to the top of the page
+Quote Post
Turson
post 20.04.2014, 11:43:29
Post #8





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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

Nie language="JavaScript" a language="text/javascript"
Odpal konsolę w przeglądarce
Go to the top of the page
+Quote Post
Azonic
post 20.04.2014, 11:52:44
Post #9





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

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

Zmieniłem tak jak napisałes otworzyłem konsole mam tam:

SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery-1.9.1.min.js:1
Error: http://183.28.12./jquery-1.9.1.min.js is being assigned a //# sourceMappingURL, but already has one
SyntaxError: syntax error
Go to the top of the page
+Quote Post
Turson
post 20.04.2014, 12:04:19
Post #10





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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

<body bgcolor="black" onload="showdial('klasa', '200');">

popraw komentarze, bo trochę namieszałeś tutaj
<!--
* Pokaż okno dialogowe
* @param what - klasa diva do otwarcia, np '.okno'
* @param w - szerokość okna w pikselach
*/

Ten post edytował Turson 20.04.2014, 12:05:07
Go to the top of the page
+Quote Post
Azonic
post 20.04.2014, 12:08:11
Post #11





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

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

Edytowałem dalej nic a w konsoli nowy bład:

SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery-1.9.1.min.js:1
Error: http://18.47/jquery-1.9.1.min.js is being assigned a //# sourceMappingURL, but already has one
SyntaxError: syntax error 185.497:13
ReferenceError: showdial is not defined



Poprawiłem komentarz:
/**
* Pokaż okno dialogowe
* @param what - klasa diva do otwarcia, np '.okno'
* @param w - szerokość okna w pikselach
*/


Pojawiło się lecz nie wyskakujące a poprostu w divie normalny "panel".

Ten post edytował Azonic 20.04.2014, 12:17:34
Go to the top of the page
+Quote Post
Turson
post 20.04.2014, 12:15:06
Post #12





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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

Sprawdzałem, działa

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





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

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

Dzięki pojawiło się tylko że z kodu wynika że okno ma być wyskakujące półprzezroczyste chodzi mi o cos takiego:




a u mnie tak to nie wygląda niestety, gdzie popełniłem kolejny błąd?

Ten post edytował Azonic 20.04.2014, 12:25:23
Go to the top of the page
+Quote Post
Turson
post 20.04.2014, 12:26:04
Post #14





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

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

zamiast
/* przezroczystość */
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;

daj
background: rgba(0,0,0,0.5);
Go to the top of the page
+Quote Post
Azonic
post 20.04.2014, 14:53:30
Post #15





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ć):



Chciałbym cos w tym stylu:


Proszę dalej o pomoc

Ten post edytował Azonic 20.04.2014, 14:58:24
Go to the top of the page
+Quote Post
trueblue
post 20.04.2014, 15:04:33
Post #16





Grupa: Zarejestrowani
Postów: 6 767
Pomógł: 1824
Dołączył: 11.03.2014

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

#dial i #dial_over position:fixed;
Drugi argument funkcji "showdial" to szerokość okienka.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
Azonic
post 20.04.2014, 15:21:45
Post #17





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

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

@trueblue dzięki za pomoc pomogło


Teraz tylko została mi jedna rzecz, jak zablokować możliwość klikania w odnosniki na stronie dopiero po potwierdzeniu okienka żeby można było cokolwiek zrobić na stronie.


Pozdrawiam

Ten post edytował Azonic 20.04.2014, 15:56:50
Go to the top of the page
+Quote Post
trueblue
post 20.04.2014, 15:58:38
Post #18





Grupa: Zarejestrowani
Postów: 6 767
Pomógł: 1824
Dołączył: 11.03.2014

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

A wyświetla się półprzezroczysta maska #dial_over?


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
Azonic
post 20.04.2014, 16:06:18
Post #19





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

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

Właśnie się nie wyświetla a dokładnie o nią mi chodzi wink.gif
Go to the top of the page
+Quote Post
trueblue
post 20.04.2014, 16:18:09
Post #20





Grupa: Zarejestrowani
Postów: 6 767
Pomógł: 1824
Dołączył: 11.03.2014

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

Bo nie masz jej w html.
Dodaj pod divem dial:
[HTML] pobierz, plaintext 
  1. <div id='dial_over'></div>
[HTML] pobierz, plaintext

W kodzie zmień:
[HTML] pobierz, plaintext 
  1.  $('#dial_over').css({height:hg, width:wd}).show();
[HTML] pobierz, plaintext

na:
[HTML] pobierz, plaintext 
  1.  $('#dial_over').show();
[HTML] pobierz, plaintext


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Wersja Lo-Fi Aktualny czas: 10.06.2024 - 11:56
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn