Probleme mit schießen eiges DIV Layers per onclick

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Probleme mit schießen eiges DIV Layers per onclick

    ich habe probleme mit dem schließen eines einfachen DIV Layers.
    Und zwar soll dieser sich schließen, wenn man außerhalb des angezeigten Inhalts klickt.. eigentlich genau so, wie bei der Bildanzeige von Facebook oder Pinterest.

    Leider schiließt sich der Layer auch, wenn ich auf den eigentlichen Inhalt klicke.

    Mit z-index gehts leider nicht .. hat jemand eine Lösung?

    Das ist der Layer:

    PHP-Code:

    function hideImageView()
    {
        
    document.getElementById("imageview").style.display "none";
        
    document.getElementById("imageview_box").style.display "none";
        
        
    document.documentElement.style.overflow 'visible';     // firefox, chrome
        
    document.body.scroll "yes"//ie    
    }

    #imageview{
    z-index10000;
    margin:30px;
    margin-left:auto;
    margin-right:auto;
    display:none;
    overflow-xnone;
    overflow-ynone;
    -
    webkit-perspective1000;
    width:630px;
    background-color:white
    moz-border-radius3px;
    -
    webkit-border-radius3px;
    border-radius3px;
    box-shadow0 1px 6px rgba(34,25,25,0.4);
    -
    moz-box-shadow0 1px 4px rgba(34,25,25,0.4);
    -
    webkit-box-shadow0 1px 6px rgba(34,25,25,0.4);
    }


    #imageview_box{
    positionfixed;
    z-index9999;
    top0;
    right0;
    bottom0;
    left0;
    display:none;
    overflow-xauto;
    overflow-yscroll;
    -
    webkit-perspective1000;
    background:transparent;
    background-image:url("http://localhost/pin/images/layer/bg.png");
    }


    <
    div id="imageview_box" onclick="hideImageView()">
        <
    div id="imageview">
            
    Inhalt des Layers... wenn hier geklickt wirddarf der layer nicht schließen!            
        </
    div>    
    </
    div

  • #2
    Hallo,

    dann gib dem Bereich, in dem ein Klick kein Schließen bewirken soll, einen eigenen onclick-Handler, in dem du cancelBubble auf true setzt und — sofern vorhanden — stopPropagation() aufrufst.

    Alternativ kannst du auch in der existierenden Funktion prüfen, ob
    Code:
    this === (theEvent.srcElement || theEvent.originalTarget)
    wahr ist und nur dann das Layer schließen.

    Gruß,

    Amica
    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
    Super, danke!
    [/COLOR]

    Kommentar


    • #3
      Target des Events abfragen, und entsprechend reagieren.

      Oder, auf den inneren Div auch einen click-Handler setzen, der das Bubbling des Events nach oben im DOM unterbindet.
      I don't believe in rebirth. Actually, I never did in my whole lives.

      Kommentar


      • #4
        Zwei absolut übereinstimmende Meinungen, das muss jetzt einfach klappen
        [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
        Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
        Super, danke!
        [/COLOR]

        Kommentar


        • #5
          Danke erstmal!!

          ich hab das nun so gelöst, allerdings scheint es nicht immer zu funktionieren.. mal gehts, mal nicht... weiß jemand woran das liegt??

          PHP-Code:
          function hideImageView()
          {

              $(
          "#imageview").click(function(event){
                
          event.stopPropagation();
              });

              
          document.getElementById("imageview").style.display "none";
              
          document.getElementById("imageview_box").style.display "none";
              
              
          document.documentElement.style.overflow 'visible';     // firefox, chrome
              
          document.body.scroll "yes"//ie    

          Kommentar


          • #6
            Du gehst die ganze Eventbehandlung falsch an. Am besten nimmst du keine onclick-Attribute (obwohl es damit auch gehen würde, wenn man es richtig macht), sondern registrierst die Events über JavaScript am Element und zwar nicht erst beim Klicken, sondern onload:
            Code:
            elem.onclick = function (pEvent) {
                var target;
                pEvent = pEvent || window.event;
                target = pEvent.originalTarget || pEvent.srcElement;
            
                // mach was mit target
            
            };
            [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
            Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
            Super, danke!
            [/COLOR]

            Kommentar


            • #7
              habs jetzt so gemacht.. und es funzt soweit

              PHP-Code:
              function hideImageView()
              {

                  $(
              "#imageview").click(function(event){
                    
              event.stopPropagation();
                  });
                  
                  $(
              "#imageview_box").click(function(event){
                        
              document.getElementById("imageview").style.display "none";
                      
              document.getElementById("imageview_box").style.display "none";
                      
                      
              document.documentElement.style.overflow 'visible';     // firefox, chrome
                      
              document.body.scroll "yes"//ie    
                  
              });    

              Kommentar


              • #8
                Zitat von BananaJo Beitrag anzeigen
                habs jetzt so gemacht.. und es funzt soweit
                Aber erst beim zweiten Klick. Der erste registriert nur die Eventhandler.
                [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                Super, danke!
                [/COLOR]

                Kommentar


                • #9
                  @AmicaNoctis danke schonmal.. du hast recht mit dem zweiten klick und versuche das grade zu lösen.. leider verstehe ich dein unteres beispiel nicht ganz und kann das für mein beispiel nicht umsetzen...

                  wofür stehen denn die variablen?

                  PHP-Code:
                  pEvent pEvent || window.event;
                  target pEvent.originalTarget || pEvent.srcElement
                  elem.onclick = function (pEvent) {
                  var target;
                  pEvent = pEvent || window.event;
                  target = pEvent.originalTarget || pEvent.srcElement;

                  // mach was mit target

                  };

                  Kommentar


                  • #10
                    pEvent steht für das Eventobjekt und unterstützt sowohl Browser, die es als Argument übergeben bekommen (z. B. Firefox) und solche, bei denen es global bereitgestellt wird (z. B. IE).

                    Target ist das Element, welches den Event ursprünglich ausgelöst hat und wird auch browserübergreifend befüllt (IE: srcElement; normale Browser: originalTarget).
                    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                    Super, danke!
                    [/COLOR]

                    Kommentar

                    Lädt...
                    X