Mit Bootstrap Modal mit einer foreach-Schleife
Habe ich eine foreach-Schleife, die durchläuft, meine Dokumente aus einer Datenbank, es zieht nur in den BILDERN, dann habe ich noch 4 Bilder pro Zeile auf meiner Seite, ich möchte klicken, es öffnet sich ein Modales mit dem Bild, klicken Sie auf einem anderen wieder dasselbe. So habe ich dieses setup:
@foreach (var item in Model.DocumentList)
{
//Below I am currently using just a ID for modal (which i know is wrong)
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" data-toggle="modal)" data-target="#myModal" title="@item.FileDescription">
@Html.DocumentUrl(item.FileUrl, false)
</a>
<span class="col-xs-12" style="text-align:center;">@item.CreatedDate.ToShortDateString()</span>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Uploaded - @item.CreatedDate.ToShortDateString()</h4>
</div>
<div class="modal-body">
@Html.DocumentUrl(item.FileUrl, true)
<div class="row">
<div class="col-md-12">
<p>
@item.FileDescription
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn banner-background white-text">Download</button>
</div>
</div>
</div>
</div>
}Ich kann sehen, warum das Daten-Ziel-modal-id nicht funktioniert, wenn ich den hover-es funktioniert, ich sehe die anderen Titel, allerdings, wenn ich auf das img selbst wenn ich auf img-4 es zeigt nur das erste img erste Titel etc. Wie kann ich dies tun, damit es funktioniert mit jedem item richtig? Auch das ändern der id modal zu einer Klasse nicht helfen, entweder.
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
In Ihrer speziellen Lösung, die Sie mit der gleichen modal-snippet für jedes Element in Ihrem Modell.DocumentList. Zum Beispiel:
Wenn immer ein-und ausschalten der modal mit einem id von myModal. Die erste modale der Seite macht wird gewinnen, wenn Sie auf die DocumentUrl. Sie sind im wesentlichen die Schaffung 4 der gleichen modal mit das einzige Unterscheidungsmerkmal die Url und Posten, und weil dieser Sie erleben das seltsame Verhalten.
Zu erreichen, was Sie versuchen zu erreichen (zumindest in der Weise, dass Sie nähern sich dem problem), Sie verwenden könnten, eine eindeutige id auf jedem modale Verknüpfung der id mit einem Wert aus Ihrem Element. Zum Beispiel:
Mit der id aus dem Modell generieren Sie eine einzigartige HTML-modal für jedes Element in Ihrem Modell.Dokument-Liste und eine einzigartige Daten-Ziel zu entsprechen. Dies würde zu vollbringen, was Sie zu tun versuchen, durch die Verwendung von 4 separaten modals.
Einem kleinen alternativen Vorschlag, wenn Sie das Gefühl, wie die Umgestaltung dieser später. Sie könnte immer laden Sie ein Einzel-modale auf der Seite und verwenden Sie JavaScript zum ändern des modalen Körper. Dieses würde die Optimierung des HTML durch Verwendung von nur einem einzigen modalen statt 4 separaten modalen snippets. Sie würde das laden einer leeren modal in der Seite zum Beispiel, und verwenden Sie die Schleife zu erzeugen, die links mit der richtigen Daten-atteributes. Diese Art von code ist TROCKEN und dein HTML-Code ist sauber.
Happy Coding!