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>