beim Klick auf die HP soll sich die Popup-Box schließen

Kurt Cobain

Kurt Cobain

Erfahrenes Mitglied
Tag Tag

Hab dan Code:
HTML: 
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
<!--

function popup( L, T ) {

    with (document.getElementById('myitem'))
    {

        if (style.display == "none")
       {
            style.display = "block";
            style.position = "absolute";
            style.left = L;
            style.top = T;
        }
        else if (style.display == "block")
        {
            style.display = "none";
        }
    }
}


function unpop() { document.getElementById('myitem').style.display = "none"; }

-->
</script>

<style type="text/css">
<!--
#myitem {
 display: none;
 position: relative;
 top:110px;
 left:180px;
 width:200px;
  border:1px solid #000000;
  background:#ffffff;
}
-->
</style>

</head>
<body>
 <img src="./taze.jpg" onclick="popup()" alt="" width="20" height="20"  />

 <div id="myitem" style="display:none;" >
    der popup
 </div>
</body>
</html>

Wenn ich auf das Pic klicke kommt die Box, wenn ich nochmal draufklick geht sie wieder weg.

Ich möchte, dass die Box, wenn sie sichtbar ist, und jemand irgendwo auf die Seite klickt, dass die Box dann verschwindet.
Hab schon ewig rumprobiert aber ich weiß nich wie ich das mach.

Hoff Ihr könnt mir weiterhelfen


Gruß Ich
 
mit
Code: 
document.onclick = unpop
gehts nicht. Denn wenn man dann auf das Bild klickt kommt die Popup-Box erst gar nicht.

Wie könnt ichs noch machen?


gruß ich
 
Wäre zwar overkill, aber du könntest per while-Schleife allen Elementen außer diesem Bild ein entsprechenden onclick zuweisen.
 
Hi,

eine weitere Möglichkeit: Du überwachst wie @FipsTheThief angeregt den onclick-Event. Dort ermittelst Du
das auslösende Element. Handelt es sich nicht um das Bild und das PopUp, schliesst Du das Element wieder.
Code: 
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
<!--
function popup( L, T ) {

    with (document.getElementById('myitem'))
    {

        if (style.display == "none")
       {
            style.display = "block";
            style.position = "absolute";
            style.left = L+"px";
            style.top = T+"px";
        }
        else if (style.display == "block")
        {
            style.display = "none";
        }
    }
}

function closePopUp(objEvt){
  var objSrc = null;

  if(window.event){
    objSrc = event.srcElement;
  }else{
    objSrc = objEvt.target;
  }

  if((objSrc != document.getElementById('myitem'))&&(objSrc != document.getElementById('img_id'))){
    document.getElementById('myitem').style.display = "none";
  }
}

document.onclick = closePopUp;

-->
</script>

<style type="text/css">
<!--
#myitem {
 display: none;
 position: relative;
 top:110px;
 left:180px;
 width:200px;
  border:1px solid #000000;
  background:#ffffff;
}
-->
</style>
</head>
<body>
 <img src="./taze.jpg" onclick="popup(100, 50);" id="img_id" alt="" width="20" height="20"   />
 <div id="myitem" style="display:none;" >
    der popup
 </div>
</body>
</html>
Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
Was Quase soweit nun gemacht hat war von mir auch so gedacht ;)

Aber wenn man nun die Überlegung weiterführt wird der onclick event immer dann ausgeführt wenn man irgendwo im Dokument irgendwo hin klickt. Das soll bedeuten auch dann wenn das Pop Up gar nicht geöffnet ist.Weiss nun nicht ob das zuviele Ressourcen frisst.
Alternativ würde ich nun vorschlagen den Event erst dann zu regestrieren wenn das Pop Up geöffnet wird , und ihn dann wieder zu löschen wenn das Pop Up geschlossen wird.

Das Ganze geht mit document.addEventListener() und document.removeEventListener im Firefox und Opera (andere Browser kA leider).

Im IE muss man dann wieder umplanen der hat nun mal wieder seine eigenen Methoden dafür die heissen hier eben nun , document.attachEvent oder document.detachEvent()

Kann man schön hier nachlesen wenn man mag : http://www.mediaevent.de/javascript/event_listener.html

Mhm hier mal meine Version und mir fiel so auf das der removeEventListener gar nit so will wie ich will irgendwie. Der Event bleibt einfach mal am Leben den bekommt man so nicht mehr rausgeprügelt.

HTML: 
<html>
	<head>
		<style type="text/css">
			.imageLayer {
				position:relative;
				top:100px;
				left:100px;
				width:200px;
				height:200px;
				background-color:#FF0000;
			}
			
			.popUpLayer {
				position:absolute;
				top:100px;
				left:400px;
				height:400px;
				width:400px;
				background-color:#00FF00;
				display:none;
			}
		</style>
		<script type="text/javascript">	
			function close () {
				alert("mhm Event wurde nicht entfernt :( ");
				document.getElementById('popUp').style.display = 'none';
			}
					
			window.onload = function (){
			
				document.getElementById('testImage').onclick = function (evt) {
					evt.cancelBubble = true;
				
					with(document.getElementById('popUp')) {
						if(style.display !== 'block') {
							style.display = 'block';
							document.addEventListener('click',close,false);
						} else {
							style.display = 'none';
							document.removeEventListener('click',close,false);
						}
					}
				}
				
			}
		</script>
	</head>
	<body>
		<div id="testImage" class="imageLayer"></div>
		<div id="popUp" class="popUpLayer" style="display:none;"></div>
	</body>	
</html>

geht nun nit im IE.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück