¿Cómo hacer un formulario emergente modal simple usando jquery y html?

Ya leí los tutoriales en jquery pero estoy teniendo dificultades para entender que hay alguien que me puede enseñar más fácilmente, por favor, quiero que suceda que cuando presione uno de mis botones su valor se mostrará en #valueFromMyButton y cuando el emergente modal a cabo i puede escribir un texto y después haga clic en Aceptar el texto que escribo se colocará en #valueFromMyModal¿Cómo hacer un formulario emergente modal simple usando jquery y html?

<!DOCTYPE HTML> 
    <html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
    </head> 
    <body> 
     <input id="btn1" type="button" value="1"> 
     <input id="btn2" type="button" value="2"> 
     <input id="btn3"type="button" value="3"> 

     <input id="valueFromMyModal" type="text"> 

     <!--How to make this pop up modal form--> 
     <div id="myform"> 
      <form> 
<label id="valueFromMyButton"></label> 
      <input id="name" type="text"> 
      <input id="btnOK" type="button" value="Ok"> 
      </form> 
     </div> 
</body> 
</html>

Fuente

2012-09-14 Brained Washed

para una mejor solución, creo que se puede utilizar jQuery UI widgets de diálogo – HungryCoder

tan difícil de entender cualquier tuts que es mucho más fácil –

se puede comprobar esto. http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ – HungryCoder

he colocado aquí contenedores completos para la consulta anterior. también puedes consultar el enlace de demostración.

Demostración:http://codebins.com/bin/4ldqp78/2/How%20to%20make%20a%20simple%20modal%20pop

HTML

<div id="panel"> 
    <input type="button" class="button" value="1" id="btn1"> 
    <input type="button" class="button" value="2" id="btn2"> 
    <input type="button" class="button" value="3" id="btn3"> 
    <br> 
    <input type="text" id="valueFromMyModal"> 
    <!-- Dialog Box--> 
    <div class="dialog" id="myform"> 
    <form> 
     <label id="valueFromMyButton"> 
     </label> 
     <input type="text" id="name"> 
     <div align="center"> 
     <input type="button" value="Ok" id="btnOK"> 
     </div> 
    </form> 
    </div> 
</div>

jQuery

$(function() { 
    $(".button").click(function() { 
     $("#myform #valueFromMyButton").text($(this).val().trim()); 
     $("#myform input[type=text]").val(''); 
     $("#myform").show(500); 
    }); 
    $("#btnOK").click(function() { 
     $("#valueFromMyModal").val($("#myform input[type=text]").val().trim()); 
     $("#myform").hide(400); 
    }); 
});

CSS

.button{ 
    border:1px solid #333; 
    background:#6479fd; 
} 
.button:hover{ 
    background:#a4a9fd; 
} 
.dialog{ 
    border:5px solid #666; 
    padding:10px; 
    background:#3A3A3A; 
    position:absolute; 
    display:none; 
} 
.dialog label{ 
    display:inline-block; 
    color:#cecece; 
} 
input[type=text]{ 
    border:1px solid #333; 
    display:inline-block; 
    margin:5px; 
} 
#btnOK{ 
    border:1px solid #000; 
    background:#ff9999; 
    margin:5px; 
} 

#btnOK:hover{ 
    border:1px solid #000; 
    background:#ffacac; 
}

Demostración:http://codebins.com/bin/4ldqp78/2/How%20to%20make%20a%20simple%20modal%20pop

Fuente

2012-09-14 10:24:33 gaurang171

Muchas gracias ... :) –

si quiero poner una "x" o algo "cerca" en la parte superior derecha del formulario emergente? ¿Dónde debería ponerlo en la función? –

demo no funciona ahora en cromo. –

de diálogo de interfaz de usuario jQuery Comprobar http://jqueryui.com/demos/dialog/

Fuente

2012-09-14 09:38:48

tan difícil de entender cualquier tuts que es mucho más fácil –

Puede ser que puedas poner aquí un código explicando pero aún siendo una buena referencia. – sri

¿Cómo hacer un formulario emergente modal simple usando jquery y html?

Respuesta

Cuestiones relacionadas