[FONT="Verdana"]hi,
im grunde ist es ja total einfach. window.open() und alles wird gut ..
naja gäbe es nicht popupblocker und die tatsache das popups einfach
nur nervig sind ^^
die folgende methode benutzt in der kleinsten ausbaustufe javascript und etwas css.
das ganze lässt sich noch um AJAX komponenten erweitern, was hier aber
keine rolle spielen soll, AJAX tutorials gibts wie sand am meer, oder öfter.
die idee hinter dem ganzen ist recht einfach, man nehme ein div-element
und missbrauche es als Popup-"fenster".
was ich in das fenster schreibe is erstmal egal, im folgenden beispiel steht
nur sinnloser text drin. man kann aber jedes html element darin unterbringen,
oder auch den inhalt des divs per AJAX nachladen.
zunächst basteln wir uns mal ein kleines HTML-Beispiel, in dem wir irgendein
html-element anlegen auf das wir dann klicken um das popup zu öffnen.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>blub?</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script src="test.js" type="text/javascript"></script>
</head>
<body>
<div style="width: 100px;height: 80px; border: 1px solid red;background-color: orange; margin: 13px;" id="test">test</div>
</body>
</html>da wir schon wissen das wir javascript benötigen binden wir auch gleich eine
entsprechende datei mit ein.
für den inhalt der datei gehen wir zunächst ein wenig borgen, ich brauch was
zuverlässiges für EventHandler (onClick ...).
was wir suchen ist Compat.addEventHandler .. google dürfte einige beispiele
liefern. des platzes wegen hab ichs hier etwas gekürzt.
function addEventHandler(element, event, handler) {
var tmp, onevent;
if (!element || !event )
return false;
if (element.addEventListener) /*DOM-konform*/
element.addEventListener(event, handler, false);
else {
onevent = 'on'+event;
if (element.attachEvent) /*IE*/
element.attachEvent(onevent, handler);
else { /*ältere Browser*/
// eventuell schon vorhandene funktionen in die variable
// tmp schieben
tmp = element[onevent];
if (typeof tmp == 'function') {
// gibt es tatsächlich schon einen handler
// für das event den neuen "anhängen"
element[onevent] = function() { tmp(); handler(); };
} else {
// ansonsten einfach den aktuellen handler dem event
// zuweisen
element[onevent] = handler;
}
}
}
}dann basteln wir uns was kleines um tipparbeit zu sparen, wir sind ja
eigentlich faul ^^
function $(id) {
return document.getElementById(id);
}$('test') liefert somit das element mit der id "test"
als nächsten brauchen wir eine funktion, die den event handler an den
"button" hängt
function initPage() {
addEventHandler($('test'),'click',showPopup);
}
addEventHandler(window,'load',initPage);das klingt jetzt vielleicht blöd, is aber im grunde die einzig verlässliche methode.
das event window.onLoad wird erst aufgerufen, wenn der browser den
DOM-Baum fertig geparst hat. wir warten deshalb bis zu dem zeitpunkt,
weil wir dann sicher sind das alle element geladen sind und wir keine
fehlermeldung bekommen das "test" nicht vorhanden wäre.
so jetzt nur noch die funktionen zum öffnen und schließen des popups.
function showPopup() {
$('hideAll').style.display = 'block';
$('popup').style.display = 'block';
addEventHandler($('popup'),'click',closePopup);
}
function closePopup() {
$('hideAll').style.display = 'none';
$('popup').style.display = 'none';
}wie man sieht wird hier einfach nur mit den style angaben der html objekte
gespielt. diese elemente gibts ja aber noch nich, also müssen wir sie noch
ins HTML einbauen.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>blub?</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script src="test.js" type="text/javascript"></script>
<style type="text/css">
#hideAll {
width: 100%;
margin: 0px;
padding: 0px;
height: 100%;
background-color: #444;
opacity: 0.9;
filter:alpha(opacity=90);
display: none;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
#popup {
width: 60%;
height: 40%;
background-color: orange;
display: none;
position: absolute;
top: 15%;
left: 10%;
}
</style>
</head>
<body>
<div style="width: 100px;height: 80px; border: 1px solid red;background-color: orange; margin: 13px;" id="test">test</div>
<div id="hideAll"> </div>
<div id="popup">das ist das popup - klick zum schließen</div>
</body>
</html>was auch nicht weiter schwer ist.
hideAll "versteckt" die ursprüngliche Seite und verhindert auch das man
versehentlich etwas anderes als das popup anklickt.
hideAll wird mit position: absolut und left/top. 0px in der linken oberen
ecke des browsers ausgerichtet und mit height/width 100% über die
gesamte seite gezogen. opacity bzw filter, für IE, macht es dann noch
ein wenig transparent.
das popup wird auch absolut positioniert, wo is dann reine geschmacksfrage.
beide elemente werden erstmal mit display: none versteckt.
die funktionen stetzen den wert dann entweder für beide auf block zum
anzeigen oder wieder auf none zum verstecken.
das sieht jetzt nach nem haufen aufwand wegen einem popup aus, das
problem ist hier leider, das IE nichts von addEventListener weiß, genauso
wenig wie ältere Browser.
Mit inline Events wäre man zwar schneller am ziel, die sollte man aber nicht
mehr verwenden, auch wenn sie praktisch von jedem JS fähigen browser
verstanden werden.
1) sie gehören nicht zum w3c standard und
2) mischt man damit zwangsläufig code und design, was man nicht tun soll
3) man kann nicht mehrere events an ein element hängen
4) ein event an mehrere elemente anhängen wird schnell unschön und viel tipperei.
so kann man alle gewünschten element in einer schleife durchlaufen und gut ^^
viel spaß beim basteln ^^[/FONT]