| 

.NET C# Java Javascript Exception

5
Hallo, welche Möglichkeiten gibt es ein CSS-Popup durch klicken in einen anderen Bereich zu schließen? Ich benutze jquery um bei onclick einen Info Bereich zu öffnen der aber neben einen X auch per "wegklicken" geschlossen werden sollte.

MFG Skiller
29.04.2013
skiller
skiller
90 ● 1 ● 5
1 Antwort
4
body{
     width:100%;
     height:100%;
     min-height:1000px;
}


$('body').click(function(){
   alert('close Popup'); 
});


Demo: jsfiddle.net/SWUYs/1//

Edit:

Wenn man das klicken aufs PopUp und die Child's davon ignorieren will geht das zum Beispiel so:

$('body').click(function(event){
  if($(event.target).parents('.popUp').addBack().is('.popUp')) return;
  alert('close Popup');
});


Demo: jsfiddle.net/SWUYs/6/
29.04.2013
Floyd
Floyd
14,6k ● 3 ● 9
Editiert 29.04.2013
Floyd
Floyd
14,6k ● 3 ● 9
Bist Du Dir sicher, dass Du das richtige jsfiddle verlinkt hast? Die Seite, auf die ich da komme, hat weder mit der Frage noch mit Deiner Antwort etwas für mich erkennbares zu tun.
Weil ich selbst erst mal drüber gestolpert bin: das alert ist als Platzhalter für Code gemeint, der das Popup schließt, ok. Der muss dann natürlich auch damit klarkommen, dass das Popup gar nicht da ist (oder der Click-Handler wird de-registriert). Und es funktioniert so ohne weiteres nur in Bereichen, die nicht schon selbst einen Click-Handler haben (große Buttons z.B.), oder?
– Matthias Hlawatsch 29.04.2013
Zum Thema jsFiddle: Ups, du hast recht. Hab denk korrekten Link eingetragen.

Zum Thema Click-Eventhandler. Solange man mittels nicht mittels "event.stopPropagation()" das Eventbubbeling verhindert, werden alle Events automatisch hochgereicht als übergeordnete Element bis hin zur Rootnode (BODY- oder HTML-Tag).

Zum dritten Thema (PopUp nicht da):
Der Code "$('DIV.myPopup').hide();" würde in jQuery keinen Fehler produzieren wenn das Element nicht da ist. Die hide()-Funktion würde nicht ausgeführt da das Elementset leer ist.
– Floyd 29.04.2013
Btw: Eine Edit-Funktion für Kommentare fehlt immernoch :(
– Floyd 29.04.2013
Danke für die Antwort! Dadurch wird das Popup aber auch geschlossen wenn auf Inhalte des Popups klicke und genau das möchte in verhindern.
– skiller 29.04.2013
Ich habe das Beispiel mal erweitert: http://jsfiddle.net/SWUYs/2/
– skiller 29.04.2013
http://jsfiddle.net/SWUYs/4/ - als "Abstauber" aus Floyds Kommentar.
– Matthias Hlawatsch 29.04.2013
oops: http://jsfiddle.net/SWUYs/5/
(grrr, so richtig intuitiv ist jsfiddle aber auch nicht immer...)
– Matthias Hlawatsch 29.04.2013
1
Geht auch einfacher: http://jsfiddle.net/SWUYs/6/

$('body').click(function(event){
if($(event.target).parents('.box2').addBack().is('.box2')) return;
alert('x');
});
– Floyd 29.04.2013
+1 (wenn ich könnte...), weil ich dadurch was gelernt habe.
Zunächst aber nur: kürzer. Einfacher mMn nur für Code-Leser, die den jQuery-Bandwurm ohne Probleme dechiffrieren können zu: "prüfe, ob das Event-Target im DOM-Baum Kind/Enkel/Urenkel... eines Elements mit Klasse .box2 ist". Da gehöre ich nicht dazu (oder jedenfalls nicht bis vor 5 Minuten).
– Matthias Hlawatsch 29.04.2013
@Matthias: Willkommen im Club (auf das +1-Problem bezogen :)) ... Ja du hast recht. Eine Erklärung wäre sicherlich hilfreich gewesen. Nur fehlte mir gestern Abend die Worte und Zeit. Also dachte ich mit: "Code sagt mehr als 1000 Worte". Aber du hast den Code schon richtig verstanden. (Kleine Anmerkung: "prüfe, ob das Event-Target im DOM-Baum Kind/Enkel/Urenkel... eines Elements mit Klasse .box2 oder !>oder selbst das Element mit der Klasse .box2<! ist". Erklräung: "addBack" (fürher "andSelf") fügt das aktuelle Element zu dem Elementset hinzu.
– Floyd 30.04.2013
Danke @Floyd, das war genau das was ich gesucht habe!
– skiller 30.04.2013

Stelle deine Javascript-Frage jetzt!