Übergabe von Daten an ein Bootstrap-Modal

Question

Ich habe einige Hyperlinks, die jeweils mit einer ID versehen sind. Wenn ich auf diesen Link klicke, möchte ich ein modales Fenster öffnen ( http://twitter.github.com/bootstrap/javascript.html#modals ), und übergeben Sie diese ID an das Modal. Ich habe bei Google gesucht, aber ich konnte nichts finden, was mir helfen könnte.

Dies ist der Code:

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

Das sollte sich öffnen:

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

Mit diesem Teil des Codes:

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

Wenn ich jedoch auf den Hyperlink klicke, passiert nichts. Wenn ich den Hyperlink <a href="#addBookDialog" ...> wird das modale Fenster zwar geöffnet, aber es enthält keine Daten.

Ich bin diesem Beispiel gefolgt: Wie man Werte Argumente zu modal.show() Funktion in Bootstrap übergeben

(und das habe ich auch versucht: Wie setzt man den Eingabewert in einem modalen Dialog? )

Answer 1

Sie können versuchen simpleBootstrapDialog . Hier können Sie Titel, Nachricht, Rückrufoptionen für Abbrechen und Absenden usw. übergeben.

Um dieses Plugin zu verwenden, fügen Sie die Datei simpleBootstrapDialog.js wie folgt ein

<script type="text/javascript" src="/simpleDialog.js"></script>

Grundlegende Verwendung

<script type="text/javascript>
$.simpleDialog();
</script>

Benutzerdefinierter Titel und Beschreibung

$.simpleDialog({
  title:"Alert Dialog",
  message:"Alert Message"
});

Mit Rückruf

<script type="text/javascript>
$.simpleDialog({
    onSuccess:function(){
        alert("You confirmed");
    },
    onCancel:function(){
        alert("You cancelled");
    }
});
</script>