Ya está conseguido, aquí os dejo el codigo para realizar una ventana flotante:
codigo javascript
:
Código PHP:
function beginDrag(elementToDrag, event){
var deltaX = event.clientX - parseInt(elementToDrag.style.left);
var deltaY = event.clientY - parseInt(elementToDrag.style.top);
if (document.addEventListener){
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
}
else if (document.attachEvent){
document.attachEvent("onmousemove", moveHandler);
document.attachEvent("onmouseup", upHandler);
}
else {
var oldmovehandler = document.onmousemove;
var olduphandler = document.onmouseup;
document.onmousemove = moveHandler;
document.onmouseup = upHandler;
}
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;
function moveHandler(e){
if (!e) e = window.event;
elementToDrag.style.left = (e.clientX - deltaX) + "px";
elementToDrag.style.top = (e.clientY - deltaY) + "px";
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
}
function upHandler(e){
if (!e) e = window.event;
if (document.removeEventListener){
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
}
else if (document.detachEvent){
document.detachEvent("onmouseup", upHandler);
document.detachEvent("onmousemove", moveHandler);
}
else {
document.onmouseup = olduphandler;
document.onmousemove = oldmovehandler;
}
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
}
}
html
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="Javascript">
function mostrar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="visible";
}
function ocultar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="hidden";
}
</script>
<script src="Drag.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<body>
<div id="capa1" onclick="mostrar('window')">Mostrar</div>
<div id="window" style="position:absolute; z-index:10; left:350px; top:160px; width:400px;background-color:#dde3eb; border:1px solid #464f5a; visibility:hidden">
<div style="padding-bottom:8px; width:400px; height:10px; background-color:#718191; border-bottom:1px solid #464f5a;" onMouseDown="beginDrag(this.parentNode, event);">
<div style="position:absolute; top:1px; left:5px; font-size:16px; font-weight:bold; color:#FFFFFF;">Ventana flotante</div>
<div style="position:absolute; top:3px; left:377px; float:right;">
<div onclick="ocultar('window')"><img src="img/cerrar.jpg" border="0" title="cerrar" /></div>
</div>
</div>
<br/>
<div style="margin-left:20px;">
Esta es una ventana flotante
</div>
<br/>
</div>
</body>
</html>