Duda: Modal flotante desde Submit (POST)

kadet · #1 (**permalink**) 30/03/2011, 05:53

La pregunta és sencilla. He encontrados topics sobre el tema, pero son específicos de facebox o lightbox.

Existe alguna manera humana de lanzar una ventana modal (flotante) desde un boton submit en un form, enviando datos por post?

Gracias.

laratik · #2 (**permalink**) 30/03/2011, 12:29

Depende de como estés manejando el código, me imagino que no estas manejando ninguna librería, así que debes tener control completo sobre la presentación de la ventana modal, de esta manera es posible colocar los datos que devuelva la petición en una ventana modal (igualmente asumo que estas manejando AJAX).

kadet · #3 (**permalink**) 31/03/2011, 02:57

He probado JQuery, varios scripts, pero finalmente he localizado un mero:

function target_popup(form) {
window.open('', 'formpopup', 'width=400,height=400,resizeable,scrollbars');
form.target = 'formpopup';
}

Pero es muy arcáica esa ventana popup del navegador, lo suyo sería una modal tipo facebox o lightbox, verdad?

laratik · #4 (**permalink**) 31/03/2011, 10:53

Pues bien, una ventana modal no es más que un div con position: fixed; pero si estas manejando algun tipo de libreria deberias especificar cual para ver si alguna otra persona te puede ayudar. Yo lo decia por si estabas manejando tu mismo la ventana moda, por ejemplo yo tengo un script que me deja hacer esto:

y como lo hice yo, puedo realizar cualquier cantidad de barbaridades con el

, pero ya con el manejo de librerias no me meto

kadet · #5 (**permalink**) 31/03/2011, 10:59

En realidad no me refería a lo que tu bien ilustras. Mi form está en la página y envía los datos a la ventana por POST. Tu tienes el form dentro de esa ventana, por lo que es mucho más fácil hacerlo trabajar con iframes o con div scroll.

Yo me refiero a esto:
<htm>
<body>
<form action="ventana modal" method="POST">

No uso ninguna librería, las actuales y más eficaces como Lightbox o Facebox no contemplan esta opción, que yo sepa.

Alguna sugerencia?

Gracia por tu respuesta.

laratik · #6 (**permalink**) 31/03/2011, 11:34

Eso lo puedo hacer perfectamente, envió una petición AJAX con la información del formulario, la respuesta la muestro dentro del div, así de sencillo. Lo que pasa es que yo tengo control sobre el script y se perfectamente como funciona. De esa manera tengo una función que me muestra la ventana modal y lo único que hago es agregar la respuesta del servidor al div y proceder a mostrarlo.

Vuelvo y te repito, si creaste la ventana modal (con tu código) y sabes AJAX no tendrás mucho problema en hacer lo que te digo.

Referente al <form action="ventana modal" method="POST"> dudo que se pueda hacer asi

kadet · #7 (**permalink**) 31/03/2011, 11:42

Querido amigo, coincidirás conmigo en que, si emito la pregunta es porque no tengo nociones de AJAX, de otro modo, no consultaría algo tan obvio.

Como dije anteriormente, usando esto:
function target_popup(form) {
window.open('', 'formpopup', 'width=400,height=400,resizeable,scrollbars');
form.target = 'formpopup';
}

Puedes enviar datos a una ventana externa en forma de popup directamente desde form, pero lo que no me satisface es que sea precisamente un popup al uso, prefiero una ventana similar a lightbox o facebox.

Te agradezco sinceramente la respuesta, no en vano, me soluciona menos que a ti tu explicación.

laratik · #8 (**permalink**) 31/03/2011, 12:48

OK, como dije en mi primer post asumí que tenias conocimientos de AJAX, si no es así no te puedo dar una solución, así es como lo haría yo:

Código Javascript:

Ver originalfunction cargar() {
    addEvent($("enviar"),"click",enviar_post,false);
}
 
function enviar_post(e) {
    stopEvent(e);
    var n1 = $("n1").value;
    var n2 = $("n2").value;
    var n3 = $("n3").value;
    if(n1!="" && n2!="" && n3!="") {
        var data = {n1:n1, n2:n2, n3:n3};//datos a evnviar
        requestAJAX(this.form.action,response,{data:data});//mi peticion AJAX
    } else {
        alert("Por favor llene los campos");
    }
}
 
function response(r) {
    var mos = $("mostrar");
    mos.innerHTML = r;//adhiero la respuesta al div
    createModal("Retornado del POST",mos.cloneNode(true));//creo la ventana modal
}
 
addEvent(window,"load",cargar,false);

Código CSS:

Ver original#mostrar {
    width: 300px;
    height: 200px;
    background: #FFF;
    display: none;
}

Código HTML:

Ver original<body>
<form action="prueba.php" method="post">
<input type="text" name="n1" id="n1" />
<input type="text" name="n2" id="n2"/>
<input type="text" name="n3" id="n3" />
<input type="submit" value="enviar" id="enviar" />
</form>
<div id="mostrar"></div>
</body>

resultado:

Claro que estoy manejándolo con mi script. Espero que alguien te de una mejor respuesta SALUDOS.

kadet · #9 (**permalink**) 01/04/2011, 15:18

Gracias, reviso esto!!!