Pasar datos a un modal de arranque

527

Tengo un par de hipervínculos que tienen 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 pude encontrar 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>

Cuál debería abrir:

<div class="modal hide" id="addBookDialog">
    <div class="modal-body">
        <input type="hidden" name="bookId" id="bookId" value=""/>
    </div>
</div>

Con esta pieza 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? )

javascript jquery asp.net-mvc twitter-bootstrap Leon Cullens
fuente

Respuestas:

533

Creo que puedes hacer que esto funcione usando jQuery's controlador de eventos .on .

Aquí hay un violín que puedes probar; solo asegúrese de expandir el marco HTML en el violín tanto como sea posible para que pueda ver el modal.

http://jsfiddle.net/Au9tc/605/

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>&nbsp;</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');
});
mg1075
fuente
2
Esto funciona bien cuando solo tengo un hipervínculo, pero tengo varios hipervínculos, cada uno con su propia ID. Agregué un segundo hipervínculo con otra ID, pero el modal siempre tiene la ID del primer hipervínculo.
Leon Cullens
1
@LeonCullens: he actualizado el violín y el código. ¿Funciona como quieres ahora?
mg1075
2
Buena respuesta, pero ¿es la modal('show')requerida? Parece que data-toggle="modal"en los enlaces se encargarían de eso.
tecnofobia
77
¡simplemente $(this).data('id');no tenía precio por sí mismo! No tenía idea de que podría obtener los atributos de datos con eso. ¡Me encantan las botas cada día más! = P
Manatax
23
@Manatax - $(this).data()es parte de jQuery. api.jquery.com/data/#data-html5
mg1075
366

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/

LostInComputer
fuente
1
$ (e.currentTarget) .find ('input [name = "bookId"]'). val (bookId); ¿Me puede decir qué hace esto? Entonces, si el modal está abierto, lo que significa que el valor del nombre de entrada bookId es el valor desde el que se hizo clic, ¿verdad?
treblaluch
@treblaluch e.currentTargetes el elemento cliqueado , que se toma del evento click e. Esta línea encuentra un inputcon el nombre bookIdy establece el valor en él.
aalaap
55
reemplazar $(this)con $(e.relatedTarget)obras geniales
Muhammad Ibnuh
1
Esto es genial, funciona para Bootstrap 4 también
jarrettyeo
36

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 botones / enlaces de activación modal:

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);
  })
});
JW
fuente
2
puede usar en !! $(this).data('id') lugar detypeof $(this).data('id') !== 'undefined'
Haseeb Zulfiqar
13

Si está usando Bootstrap 3+, esto se puede acortar un poco más si usa Jquery.

HTML

<a href="#" data-target="#my_modal" data-toggle="modal" class="identifyingClass" data-id="my_id_value">Open Modal</a>

<div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="my_modalLabel">
<div class="modal-dialog" role="dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
        </div>
        <div class="modal-body">
            Modal Body
            <input type="hidden" name="hiddenValue" id="hiddenValue" value="" />
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary">Yes</button>
        </div>
    </div>
</div>

JQUERY

<script type="text/javascript">
    $(function () {
        $(".identifyingClass").click(function () {
            var my_id_value = $(this).data('id');
            $(".modal-body #hiddenValue").val(my_id_value);
        })
    });
</script>
VTStampede
fuente
10

Su código habría funcionado con la estructura html modal correcta.

$(function(){
  $(".open-AddBookDialog").click(function(){
     $('#bookId').val($(this).data('id'));
    $("#addBookDialog").modal("show");
  });
});
<html>
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<a data-id="@book.Id" title="Add this item" class="open-AddBookDialog">Open Modal</a>

<div id="addBookDialog" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
       <input type="hidden" name="bookId" id="bookId" value=""/>
      </div>
    
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</html>
Expandir fragmento

phil
fuente
9

Bootstrap 4.3 - use el código del fragmento a continuación - más aquí

Mostrar fragmento de código

Kamil Kiełczewski
fuente
1

Así es como puede enviar id_data a un modal:

<input
    href="#"
    data-some-id="uid0123456789"
    data-toggle="modal"
    data-target="#my_modal"
    value="SHOW MODAL"
    type="submit"
    class="btn modal-btn"/>

<div class="col-md-5">
  <div class="modal fade" id="my_modal">
   <div class="modal-body modal-content">
     <h2 name="hiddenValue" id="hiddenValue" />
   </div>
   <div class="modal-footer" />
</div>

Y el javascript: 

    $(function () {
     $(".modal-btn").click(function (){
       var data_var = $(this).data('some-id');
       $(".modal-body h2").text(data_var);
     })
    });
abhishek rana
fuente
1

Intenta con esto

$(function(){
 //when click a button
  $("#miButton").click(function(){
    $(".dynamic-field").remove();
    //pass the data in the modal body adding html elements
    $('#myModal .modal-body').html('<input type="hidden" name="name" value="your value" class="dynamic-field">') ;
    //open the modal
    $('#myModal').modal('show') 
  })
})
Dey-Dey
fuente
Pero, ¿qué pasa si cierra el cuadro de diálogo y lo abre para otro elemento ... agregará 2 campos ocultos y será un desastre una vez que envíe el formulario del cuadro de diálogo
Pitzas
0

Puedes probar simpleBootstrapDialog . Aquí puede pasar el título, el mensaje, las opciones de devolución de llamada para cancelar y enviar, etc.

Jithin Vijayan
fuente
44
¡Bienvenido a Stack Overflow! Si bien los enlaces son una excelente forma de compartir conocimientos, realmente no responderán la pregunta si se rompen en el futuro. Agregue a su respuesta el contenido esencial del enlace que responde a la pregunta. En caso de que el contenido sea demasiado complejo o demasiado grande para caber aquí, describa la idea general de la solución propuesta. Recuerde mantener siempre un enlace de referencia al sitio web de la solución original. Ver: ¿Cómo escribo una buena respuesta?
sɐunıɔ ןɐ qɐp
0

Esto es muy fácil con jquery:

Si a continuación está su enlace de anclaje:

<a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a>

En el evento show de su modal, puede acceder a la etiqueta de anclaje como se muestra a continuación

//triggered when modal is shown
$('#modal_id').on('shown.bs.modal', function(event) {

    // The reference tag is your anchor tag here
    var reference_tag = $(event.relatedTarget); 
    var id = reference_tag.data('id')
    // ...
    // ...
})
Ehsan Ahmadi
fuente