ventana flotante

igonfil · #1 (**permalink**) 01/12/2010, 07:27

Estoy intentando realizar una ventana flotante. Resulta que investigando por internet encontré un código que se parece a lo que necesito, pero lo que sucede es que necesido añadir un formulario con una select dinamica con asp y un botón pero no se como hacerlo. Muchas gracias

el codigo es el siguiente:

Código PHP:

  <!doctype html> 
<html> 
    <meta charset="utf-8"> 
    <title>Basic usage of the jQuery UI dialog</title> 
  
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"> 
  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
        var usuario='<%=Hola%>' 
        var $dialog = $('<div></div>') 
            .html('This dialog will show every time!') 
            .dialog({ 
                autoOpen: false, 
                title: 'Basic Dialog' 
            }); 
  
        $('#opener').click(function() { 
            $dialog.dialog('open'); 
            // prevent the default action, e.g., following a link 
            return false; 
        }); 
    }); 
    </script> 
</head> 
<body> 
  
<!--<p>This is an example from the Nemikor Blog article <a href="http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/">Basic usage of the jQuery UI dialog</a>.</p>--> 
  
<button id="opener">Open the dialog</button> 
  
<script type="text/javascript">  
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 
</script> 
<script type="text/javascript"> 
try { 
var pageTracker = _gat._getTracker("UA-9863993-1"); 
pageTracker._trackPageview(); 
} catch(err) {}</script> 
  
</body> 
</html>

igonfil · #2 (**permalink**) 03/12/2010, 04:48

En el caso de que no se pueda hacer con este código lo que necesito. ¿Alguien me puede decir como hacer una ventana flotante dinámica que sea parecida? Muchas gracias

igonfil · #3 (**permalink**) 07/12/2010, 11:51

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&iacute;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>