[HTML][CSS][JavaScript] onclick problem, okno ala lightbox Opcje

[dziadzlasu]

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

Ten post edytował dziadzlasu 2.03.2009, 16:34:25

[wookieb]

Dodac do .zawartoscokna zdarzenie onclick wywolujace nic nie robiaca funkcje. Albo zwracajaca false

Ten post edytował wookieb 2.03.2009, 16:34:47

[dziadzlasu]

Dodac do .zawartoscokna zdarzenie onclick wywolujace nic nie robiaca funkcje. Albo zwracajaca false

Juz tego probowalem, nie dziala, zawartosc nadal znika onclick
Probowalem tez z z-index ale ni cholery :/

Ten post edytował dziadzlasu 2.03.2009, 16:36:50

[erix]

Chyba chodzi o event.cancelBubble.

[dziadzlasu]

Chyba chodzi o event.cancelBubble.

Nie duzo mi to mowi bo prawde mowiac w JS nie programuje biegle...

[erix]

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]

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>