¿Cómo paso un valor a un Bootstrap Modal? Tengo algo de HTML básico que se ve así:
<h2 class="name" itemprop="name">Name ABC</h2>Lo que me gustaría que sucediera es que el 'NOMBRE ABC' se presione o se 'haga eco' dentro de un modal de arranque.
Supongo que usa una 'id', pero no debo estar seguro de cómo codificar eso ...
El HTML en el arranque necesitaría
<input type="text" name=" ID " value=""/> * I think!! *Si alguien puede saltar con el JavaScript básico para hacer que esto funcione, ¡estaría muy agradecido! ¡Gracias!
$("#submit").click(function(){ $("#modalInput").val($("#input").val()); $("#modal_id").modal('show'); }); <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> Type a message : <input type="text" id="input"> <button id="submit">Send</button> <div class="modal fade" id="modal_id"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Message!</h4> </div> <div class="modal-body"> Your Value : <input type="text" id="modalInput" readonly/> </div> </div> </div> </div>Para lograr esto, puede crear una instancia de un modal Bootstrap como de costumbre, luego simplemente agregue un controlador de clic al elemento h2 que coloca su valor de text() dentro de la input de destino en el modal. Prueba esto:
$('.name').click(function() { $('#foo').val($(this).text()) }); <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <h2 class="name" itemprop="name" data-toggle="modal" data-target="#exampleModal">Name ABC</h2> <h2 class="name" itemprop="name" data-toggle="modal" data-target="#exampleModal">Name XYZ</h2> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <input type="text" id="foo" name="ID" value="" /> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>puedes intentar seguir
$('input[name="ID"]').val($('h2.name').text()); $('input[name="ID"]').val($('h2.name').text()); <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2 class="name" itemprop="name">Name ABC</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <input type="text" name="ID" value="" /> * I think!! * </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>