Pasar datos a un modal de arranque
Tengo un par de hipervínculos y cada uno tiene una identificación adjunta. Cuando hago clic en este enlace, quiero abrir un modal ( http://twitter.github.com/bootstrap/javascript.html#modals ) y pasar esta ID al modal. Busqué en google, pero no encontré nada que pudiera ayudarme.
Este es el código:
<a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a>
Que debería abrirse:
<div class="modal hide" id="addBookDialog">
<div class="modal-body">
<input type="hidden" name="bookId" id="bookId" value=""/>
</div>
</div>
Con este fragmento de código:
$(document).ready(function () {
$(".open-AddBookDialog").click(function () {
$('#bookId').val($(this).data('id'));
$('#addBookDialog').modal('show');
});
});
Sin embargo, cuando hago clic en el hipervínculo, no sucede nada. Cuando doy el hipervínculo <a href="#addBookDialog" ...>, el modal se abre bien, pero no contiene ningún dato.
Seguí este ejemplo: Cómo pasar argumentos de valores a la función modal.show() en Bootstrap
(y también probé esto: ¿Cómo establecer el valor de entrada en un diálogo modal? )
Creo que puedes hacer que esto funcione usando el controlador de eventos .on de jQuery .
Aquí tienes un violín que puedes probar; solo asegúrese de expandir el marco HTML en el violín tanto como sea posible para poder ver el modal.
http://jsfiddle.net/8c05pn1f/
HTML
<p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
<p> </p>
<p>Link 2</p>
<a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
<div class="modal hide" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="bookId" id="bookId" value=""/>
</div>
</div>
JAVASCRIPT
$(document).on("click", ".open-AddBookDialog", function () {
var myBookId = $(this).data('id');
$(".modal-body #bookId").val( myBookId );
// As pointed out in comments,
// it is unnecessary to have to manually call the modal.
// $('#addBookDialog').modal('show');
});
Aquí hay una forma más limpia de hacerlo si está utilizando Bootstrap 3.2.0 .
Enlace HTML
<a href="#my_modal" data-toggle="modal" data-book-id="my_id_value">Open Modal</a>
JavaScript modal
//triggered when modal is about to be shown
$('#my_modal').on('show.bs.modal', function(e) {
//get data-id attribute of the clicked element
var bookId = $(e.relatedTarget).data('book-id');
//populate the textbox
$(e.currentTarget).find('input[name="bookId"]').val(bookId);
});
http://jsfiddle.net/k7FC2/
Así es como lo implementé trabajando desde el código de @ mg1075. Quería un código un poco más genérico para no tener que asignar clases a los enlaces/botones de activación modales:
Probado en Twitter Bootstrap 3.0.3.
HTML
<a href="#" data-target="#my_modal" data-toggle="modal" data-id="my_id_value">Open Modal</a>
JAVASCRIPT
$(document).ready(function() {
$('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
var data_id = '';
if (typeof $(this).data('id') !== 'undefined') {
data_id = $(this).data('id');
}
$('#my_element_id').val(data_id);
})
});
Bootstrap 4.3 - use el código del siguiente fragmento - más aquí
Mostrar fragmento de código
