|
Mit diesem JavaScript lässt sich eine Popup Feanster in Form eines Layers erzeugen. Das Popup wird ähnlich eines Tooltips dargestellt, bezieht seinen Text aber aus einer externen Datei.
Autor: JTricks.com
weitere Informationen gibt es hier.
in <head> einfügen
<SCRIPT LANGUAGE="JavaScript">
<!-- by JTricks.com -->
function move_box(an, box) {
var cleft = 0;
var ctop = 0;
var obj = an;
while (obj.offsetParent) {
cleft += obj.offsetLeft;
ctop += obj.offsetTop;
obj = obj.offsetParent;
}
box.style.left = cleft + 'px';
ctop += an.offsetHeight + 8;
if (document.body.currentStyle &&
document.body.currentStyle['marginTop']) {
ctop += parseInt(
document.body.currentStyle['marginTop']);
}
box.style.top = ctop + 'px';
}
function show_hide_box(an, width, height, borderStyle) {
var href = an.href;
var boxdiv = document.getElementById(href);
if (boxdiv != null) {
if (boxdiv.style.display=='none') {
move_box(an, boxdiv);
boxdiv.style.display='block';
} else
boxdiv.style.display='none';
return false;
}
boxdiv = document.createElement('div');
boxdiv.setAttribute('id', href);
boxdiv.style.display = 'block';
boxdiv.style.position = 'absolute';
boxdiv.style.width = width + 'px';
boxdiv.style.height = height + 'px';
boxdiv.style.border = borderStyle;
boxdiv.style.backgroundColor = '#fff';
var contents = document.createElement('iframe');
contents.scrolling = 'no';
contents.frameBorder = '0';
contents.style.width = width + 'px';
contents.style.height = height + 'px';
contents.src = href;
boxdiv.appendChild(contents);
document.body.appendChild(boxdiv);
move_box(an, boxdiv);
return false;
}
</SCRIPT>
in <body> einfügen
<!-- Add an onClick handler to the hyperlinks you want to display in the boxes. The handler should call the show_hide_box function with four parameters. The first should always be 'this'. The second is the width of the box in pixels, the third is the height in pixels, and the last one is the border style. -->
weitere Informationen gibt es <a href="link zum text " onClick="return show_hide_box(this,200,270,'2px dotted')">hier</a>.
|