So starten Sie vorhandene HTML-Inhalte in ein Bootstrap Modal dynamisch, ohne modal html-Code für jeden link?

Ich habe ein paar Artikel über das laden von remote-Inhalt in modals oder dynamische Inhalte, und Lesen Sie die #531 Problem https://github.com/twitter/bootstrap/issues/531 kann Sie aber nicht finden, was ich will, vielleicht, weil ich bin, über das problem nachzudenken in die falsche Richtung.

Habe ich eine Liste von Inhalten an, jedes Element mit einem anderen Produkt und einige details über Sie. Ich möchte in der Lage sein, um Sie auf eine 'view details' - link für jedes Produkt, und haben den gleichen Inhalt füllen, in eine modale, sondern wird mit CSS display einige kleine zusätzliche Informationen (meine Frage wäre, wie das abrufen unterschiedlicher Inhalte dynamisch, aber ich denke, dass so wenig zusätzliche Informationen, die ich brauche, es lohnt sich nicht die Anfrage).

Den HTML-Code für eine Liste item:

<ul>
    <li class="span4 product">
        <div class="inner">
            <img src="xxxxx" alt="Product xxxxx" />
            <div class="control-group">
                <label class="control-label">Product Type:</label>
                <span class="field">Really cool product</span>
            </div>
            <!-- Small amount of hidden additional information -->
            <div class="control-group hide">
                <label class="control-label">Product ID:</label>
                <span class="field">123456</span>
            </div>
        </div>
        <a class="details" data-toggle="modal" href="#product-details">View details</a>
    </li>
</ul>

1 Bootstrap-Modal HTML:

<div id="product-details" class="modal hide fade" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
       <!-- Product Detail in here dynamically -->
    </div>
</div>

Wenn du auf 'details' - link, ich will die "inneren" Inhalte zu zeigen, modal. Es gibt hier zwei Probleme:

1. Gibt es viele Einträge in dieser Liste (die ich gerade gezeigt habe 1), und ich möchte, dass jeder "details" - link zum anzeigen der Einzelheiten der , dass Produkt in der modal.
2. Ich will nicht zu viel zusätzliche statische, modal-html-code, der als Ziel für jedes Element, ich will nur die 1 -, modal -, aber der Inhalt unterschiedlich, je nach dem 'details' - link angeklickt wird.

Ich nehme an, ich brauche den ein modal in der html, wie gezeigt, in diese Frage zu remote-modale Dialoge.

Es ist nur, wie ändere ich den Inhalt bin ich nicht sicher.

BEARBEITEN

Habe ich gefunden eine mögliche Lösung (kann aber keine Antwort auf meine eigene Frage für ein paar Stunden).

$('.product a.details').click(function(){
    $(this).parent('.inner').clone().appendTo('#device-modal .modal-body');
    $('#product-details').modal();
});

$('#product-details').on('hidden', function(){
    $('#product-details .inner').remove();
});

Es-Klone, die 'innere' div des 'Produkts' und fügt es an die statische, modal-container, wenn die "details", dann startet der modal-wenn der link angeklickt wird.

Zweiten Teil entfernt, der Klon, wenn Sie verlassen Sie den modal.