Pasar parametros de form a ventana modal

[fhederico]

Bueno, asumamos que no tienes nada, asi que lo haremos de cero

Cargamos los Script

Código:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src='js/jquery-ui-1.10.3.custom.min.js'></script>

Y el CSS del Modal

Código:

<link href='css/jquery-ui.css' type="text/css" rel="stylesheet" />

Necesitaremos al menos un DIV en nuestro html para el contenido

Código:

<div id="dialog-modal" title=""></div>

Ahora en nuestro codigo, llamamos el modal

Código:

<script type="text/javascript">

//Lo declaramos como una variable global, para que pueda cerrarse desde cualquier funcion
var cuadroDialog = "";

//Inicializamos el modal
$(document).ready(function()
{
                    cuadroDialog = $("#dialog-modal").dialog({
                        autoOpen: false,
                        width: 450,
                        height: 280,
                        modal: true
                    });

     //Asumimos que tenemos una funcion con la cual cargaremos los datos
    function hola()
    {
          //Cargamos los datos via ajax, asumiendo que retorna un html
          $.ajax(
          {
                 type: "POST",
                 url: url, //URL a llamar
                 //data: parametros, //Si necesitamos pasarle algun parametro
                 success: function(data, textStatus, XMLHttpRequest)
                {
                 
                    //Podemos ponerle un titulo diferente si lo deseamos
                    $(".ui-dialog-title").text("soy una tellible ventana modal :D");
  
                   //Cargamos los datos retornados limpiando los espacios en blanco
                    $("#dialog-modal").html(data.trim());

                   //Personalizamos los botones a mostrar
                      cuadroDialog.dialog({
                        buttons: {
                            "soy un boton": function() {
                                alert("si, soy un boton o puedo ser una funcion, tu decides");
                            },
                            "cerrar": function() {
                                cerrar();
                            }
                        }
                    });    
                    
                    //abrimos la ventana
                    cuadroDialog.dialog('open');

                 },
                 error:  function(data, textStatus, XMLHttpRequest)
                {
                      alert("nooo, tenemos un error "+textStatus);
                }
           }); 
      }

      //cerramos ventana
           function cerrar()
                {
                    //Limpiamos el DIV por si alguien mas lo necesita ocupar
                    $("#dialog-modal").html('');
                    $(".ui-dialog-title").text('');
                     //cerrar
                    cuadroDialog.dialog('close');
                }
});
</script>

Saludos