Passare i dati a un bootstrap modale


527

Ho un paio di collegamenti ipertestuali a cui è associato un ID. Quando faccio clic su questo link, desidero aprire un modale ( http://twitter.github.com/bootstrap/javascript.html#modals ) e passare questo ID al modale. Ho cercato su Google, ma non sono riuscito a trovare nulla che potesse aiutarmi.

Questo è il codice:

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

Che dovrebbe aprire:

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

Con questo pezzo di codice:

$(document).ready(function () {
    $(".open-AddBookDialog").click(function () {
        $('#bookId').val($(this).data('id'));
        $('#addBookDialog').modal('show');
    });
});

Tuttavia, quando faccio clic sul collegamento ipertestuale, non succede nulla. Quando do il collegamento ipertestuale <a href="#addBookDialog" ...>, il modale si apre bene, ma non contiene alcun dato.

Ho seguito questo esempio: come passare argomenti di valori alla funzione modal.show () in Bootstrap

(e ho anche provato questo: come impostare il valore di input in un dialogo modale? )

Risposte:


533

Penso che puoi farlo funzionare usando il gestore di eventi .on di jQuery .

Ecco un violino che puoi testare; assicurati di espandere il frame HTML nel violino il più possibile in modo da poter visualizzare il modale.

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');
});

2
Funziona bene quando ho un solo collegamento ipertestuale, ma ho più collegamenti ipertestuali, ognuno con il proprio ID. Ho aggiunto un secondo collegamento ipertestuale con un altro ID, ma il modale ha sempre l'ID del primo collegamento ipertestuale.
Leon Cullens,

1
@LeonCullens - Ho aggiornato il violino e il codice. Funziona nel modo desiderato ora?
mg1075,

2
Buona risposta - ma è modal('show')necessario? Sembra che data-toggle="modal"sui link ce ne occuperebbe.
tecnofobia,

7
solo il non ha $(this).data('id');prezzo da solo! Non avevo idea che potresti ottenere gli attributi dei dati con quello. Adoro i bootstrap ogni giorno di più! = P
Manatax,

23
@Manatax - $(this).data()fa parte di jQuery. api.jquery.com/data/#data-html5
mg1075

366

Ecco un modo più pulito per farlo se si utilizza Bootstrap 3.2.0 .

Link HTML

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

JavaScript modale

//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/


1
$ (e.currentTarget) .find ( 'ingresso [name = "BookID"]') val (BookID).; puoi dirmi cosa fa questo? Quindi se il modale è aperto significa che il valore del book name di input è il valore dal quale è stato cliccato giusto?
Treblaluch,

@treblaluch e.currentTargetè l'elemento cliccato, che viene preso dall'evento click e. Questa riga trova un inputcon il nome bookIde imposta il valore su di esso.
aalaap,

5
sostituendo $(this)con $(e.relatedTarget)grandi opere
Muhammad Ibnuh il

1
Questo è fantastico, funziona anche con Bootstrap 4
jarrettyeo

36

Ecco come l'ho implementato lavorando dal codice di @ mg1075. Volevo un codice un po 'più generico per non dover assegnare classi ai collegamenti / pulsanti di attivazione modali:

Testato su 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);
  })
});

2
puoi usare !! $(this).data('id') invece ditypeof $(this).data('id') !== 'undefined'
Haseeb Zulfiqar

13

Se sei su bootstrap 3+, questo può essere ulteriormente abbreviato se usi 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>

10

Il tuo codice avrebbe funzionato con la corretta struttura html modale.

$(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>


9

Bootstrap 4.3 : utilizzare il codice dal frammento di seguito: ulteriori informazioni qui


1

Ecco come puoi inviare id_data a un modale:

<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>

E il javascript:

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

1

Prova con questo

$(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') 
  })
})

Ma cosa succede se chiudi la finestra di dialogo e la apri per un altro elemento ... aggiungerai 2 campi nascosti e sarà un disastro una volta che invii il modulo della finestra di dialogo
Pitzas

0

Puoi provare simpleBootstrapDialog . Qui è possibile passare titolo, messaggio, opzioni di richiamata per annullare e inviare ecc ...


4
Benvenuto in Stack Overflow! Sebbene i collegamenti siano un ottimo modo per condividere le conoscenze, in realtà non risponderanno alla domanda se si romperanno in futuro. Aggiungi alla tua risposta il contenuto essenziale del link che risponde alla domanda. Nel caso in cui il contenuto sia troppo complesso o troppo grande per adattarsi qui, descrivere l'idea generale della soluzione proposta. Ricordarsi di mantenere sempre un riferimento al collegamento al sito Web della soluzione originale. Vedi: Come posso scrivere una buona risposta?
sɐunıɔ ןɐ qɐp,

0

Questo è così facile con jquery:

Se di seguito è il collegamento di ancoraggio:

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

Nell'evento show del tuo modale puoi accedere al tag anchor come di seguito

//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')
    // ...
    // ...
})


Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.