Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS][JavaScript] onclick problem
Forum PHP.pl > Forum > Przedszkole
dziadzlasu
2.03.2009, 16:30:48
Czesc, wiec mam drobny problem... Probuje zrobic wlasne okno podobne do np LightBox, ale...

CSS:
Kod
   #ciemne {
    width:100%;
    height:100%;
    background-color:black;
    opacity:0.5;
    position:fixed;
    top:0;
    }
    
    .okno {
    display:table-cell;
    vertical-align:middle;
    }
    
    .okno .zawartoscokna {
    background-color:white;
    width:200px;
    margin: 0 auto;
    }


xHTML
Kod
<div id="ciemne" style="display:none" onclick="pokaz('ciemne')">
   <div class="okno">
    <div class="zawartoscokna">
     Tresc [formularz]
    </div>
   </div>
  </div>


JS
Kod
function pokaz(toid)
   {
   var show = document.getElementById(toid);
   var view = show.style.display;
   if (view == "block" || "table")
    {
    show.style.display = "none";
    }
   if (view == "none")
    {
    if(toid == "ciemne")
     {
     show.style.display = "table";
     }
    else
     {
     show.style.display = "block";
     }
    }
   }

Gdy klikam na zaciemnione tlo = id #ciemne cale przyciemnienie tlo i okno z informacjami (classs .zawartoscokna) znika - o to chodzi! dziala!
Ale gdy klikam na tresc okna czyli klase .zawartoscokna tez znika, a tego nie chce bo w tresci ma byc formularz.

Jak zrobic aby po kliknieciu klasy .zawartoscokna - nic nie znikalo? A po kliknieciu na id #ciemne znikalo wszystko?

Pozdrawiam Dziad z Lasu
wookieb
2.03.2009, 16:34:14
Dodac do .zawartoscokna zdarzenie onclick wywolujace nic nie robiaca funkcje. Albo zwracajaca false
dziadzlasu
2.03.2009, 16:35:27
Cytat(wookieb @ 2.03.2009, 16:34:14 ) *
Dodac do .zawartoscokna zdarzenie onclick wywolujace nic nie robiaca funkcje. Albo zwracajaca false


Juz tego probowalem, nie dziala, zawartosc nadal znika onclick sad.gif
Probowalem tez z z-index ale ni cholery :/
erix
2.03.2009, 16:36:24
Chyba chodzi o event.cancelBubble.
dziadzlasu
2.03.2009, 16:47:33
Cytat(erix @ 2.03.2009, 16:36:24 ) *
Chyba chodzi o event.cancelBubble.

Nie duzo mi to mowi bo prawde mowiac w JS nie programuje biegle...
erix
2.03.2009, 16:58:15
Mianowicie, chodzi o dziedziczenie zdarzeń - jeśli klikniesz na najmniejszą warstwę, to - z tego, co pamiętam - to zdarzenia są dziedziczone - onclick dla tej warstwy, dla warstwy ją zawierającej, itd.

Jeśli ustawisz tę flagę na true, będzie oki. Ale lepiej jest stosować stopPropagation - https://developer.mozilla.org/en/DOM/event.stopPropagation
dziadzlasu
2.03.2009, 17:00:41
Cytat(erix @ 2.03.2009, 16:58:15 ) *
Mianowicie, chodzi o dziedziczenie zdarzeń - jeśli klikniesz na najmniejszą warstwę, to - z tego, co pamiętam - to zdarzenia są dziedziczone - onclick dla tej warstwy, dla warstwy ją zawierającej, itd.

Jeśli ustawisz tę flagę na true, będzie oki. Ale lepiej jest stosować stopPropagation - https://developer.mozilla.org/en/DOM/event.stopPropagation


Dzieki, dziala - to jest to!
Kod
<div id="ciemne" style="display:none" onclick="pokaz('ciemne')">
<div class="okno">
  <div class="zawartoscokna" onclick="event.stopPropagation()">
   asd
  </div>
</div>
</div>
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.