Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][CSS] Wyskakujące okienko
Forum PHP.pl > Forum > Przedszkole
Azonic
19.04.2014, 23:39:44
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.
Turson
19.04.2014, 23:42:43
Dobra, masz funkcję ale trzeba ją gdzieś wywołać smile.gif
Azonic
20.04.2014, 09: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
kujol
20.04.2014, 09:55:55
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
Azonic
20.04.2014, 10:13:55
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
Turson
20.04.2014, 10:45:12
Kod
<script language="JavaScript">
showdial('.klasa', '200');
</script>
Azonic
20.04.2014, 11:41:15
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
Turson
20.04.2014, 11:43:29
Nie language="JavaScript" a language="text/javascript"
Odpal konsolę w przeglądarce
Azonic
20.04.2014, 11:52:44
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
Turson
20.04.2014, 12:04:19
<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
*/
Azonic
20.04.2014, 12:08:11
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".
Turson
20.04.2014, 12:15:06
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
Azonic
20.04.2014, 12:24:33
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?
Turson
20.04.2014, 12:26:04
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);
Azonic
20.04.2014, 14:53:30
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
trueblue
20.04.2014, 15:04:33
#dial i #dial_over position:fixed;
Drugi argument funkcji "showdial" to szerokość okienka.
Azonic
20.04.2014, 15:21:45
@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
trueblue
20.04.2014, 15:58:38
A wyświetla się półprzezroczysta maska #dial_over?
Azonic
20.04.2014, 16:06:18
Właśnie się nie wyświetla a dokładnie o nią mi chodzi wink.gif
trueblue
20.04.2014, 16:18:09
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
Azonic
20.04.2014, 16:22:54
Ok wszysto działa dziękuje bardzo bez was bym nie dał rady smile.gif



Jeszcze ostatnie pytanie, chciałbym aby po potwierdzeniu okienka ponownie nie wyskakiwało


Mam tu funkcje:
[PHP] pobierz, plaintext 
  1. /**
  2.  * Zamknij okno
  3.  * @param co - klasa diva do zamknięcia.
  4.  */
  5. function kill(co) {
  6. $('#dial_over').hide();
  7. $('.'+co).hide();
  8. }
[PHP] pobierz, plaintext


Tylko ja to wykorzystać w praktyce?



Pozdrawiam
trueblue
20.04.2014, 16:51:06
Przed wyświetleniem okienka sprawdzać czy istnieje ciastko o nazwie np. "okienko"; istnieje - nie wyświetlać. Podczas zamykania okienka zapisywać ciastko o takiej nazwie.
https://github.com/carhartl/jquery-cookie
Azonic
20.04.2014, 20:07:08
Troche mam problem z tym bo nie wiem co jest zbytnio do czego, jestem początkującym webmasterem i dopiero się ucze smile.gif

Ale mam pewien skrypt:
pl.php
[PHP] pobierz, plaintext 
  1. // plugins
  2. $lang['Simple_notice'] = "Wyświetlana treść";
[PHP] pobierz, plaintext


common.js
[PHP] pobierz, plaintext 
  1. /* PLUGINS */
  2.  
  3. function simpleNotice( sNotice ){
  4.   jQuery(document).ready(function(){
  5.     var bCookiesNoticeClosed = throwCookie( 'bCookiesNoticeClosed' );
  6.     if( !bCookiesNoticeClosed && sNotice != '' ){
  7.       $( 'body' ).prepend( '<div id="noticeAboutCookies">'+sNotice+'<a href="#" class="close">[x]</a></div>' );
  8.       jQuery("#noticeAboutCookies").delay(1000).slideToggle("slow");
  9.       jQuery("#noticeAboutCookies .close").click(function(){
  10.         jQuery("#noticeAboutCookies").delay(500).slideUp("slow")
  11.         createCookie( 'bCookiesNoticeClosed', true );
  12.         return false;
  13.       });
  14.     }
  15.   });
  16. }
[PHP] pobierz, plaintext


index.php
[PHP] pobierz, plaintext 
  1. <?php if( !defined( 'JQUERY-LOADED' ) ){ echo '<script type="text/javascript" src="'.$config['dir_plugins'].'jquery-1.9.1.min.js"></script>'; define( 'JQUERY-LOADED', true ); } ?>
  2.   <script type="text/javascript">$( function(){simpleNotice( "<?php echo $lang['Simple_notice']; ?>" );} );</script>
[PHP] pobierz, plaintext


style.css
[PHP] pobierz, plaintext 
  1. #noticeAboutCookies{display:none;padding:7px 0;background:#fff;font-weight:bold;border-bottom:1px solid #555;}
  2. #noticeAboutCookies .close{margin-left:20px;font-size:0.917em;color:#999;font-weight:normal;text-decoration:none;}
  3. #noticeAboutCookies .close:hover{color:#f00;}
[PHP] pobierz, plaintext



Skrypt ten wysuwa taki mały pasek u góry strony z powiadomieniem. na koncu tego skryptu mamy [X] i po kliknięciu w ten [X] powiadomienie się zamyka i po ponownym wejsciu na strone już sie nie pokazuje więc musi zapisywać cookies.

Mam pytanie, który kod będzie odpowiadał za zapisywanie cookies to moze by udało mi się przrobic z wasza pomocą wink.gif

Pozdrawiam

edit:
Dokładnie wygląda tak:
Turson
20.04.2014, 20:15:00
tu tworzy cookie
createCookie( 'bCookiesNoticeClosed', true );

a tu sprawdza czy istnieje
var bCookiesNoticeClosed = throwCookie( 'bCookiesNoticeClosed' );
if( !bCookiesNoticeClosed && sNotice != '' ){
Azonic
20.04.2014, 23:17:06
Proszę o dalszą pomoc ponieważ cięzko mi się z tym uporać a co do ciasteczek i javy to jestem kompletnie zielony.

Koncze serwis juz dużo mi nie brakuje a szkoda żebym utknął.



Pozdrawiam
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.