Как сделать содержимое модального окна разным для разных блоков
Помогите с вопросом. В цикле карточки и модальное окно наполняются информацией. Но при клике по любой карточке открывается модальное окно с информацией только о первой карточке, хотя в инспекторе информация для каждой карточки своя. Как сделать так, чтоб показывалось модальное окно для конкретной карточки?
@model Checkitlink.Models.ViewModels.ProfileVM
@foreach (var item in Model.LinkListUserProfile)
{
***Карточка***
<div class="col-xs-12 col-sm-4 col-md-4 link-item linkCard">
<div class="thumbnail">
<img class="imgCardLink" data-toggle="modal" data-target="#showLink" title="Подробнее..." src="http://checkitlink.com/img/screen/3596.jpeg">
<div class="caption">
<h5 data-toggle="modal" data-target="#showLink">
@if (@item.LinkName.Length > 55)
{
<span title="@item.LinkName">
@item.LinkName.Substring(0, 55).Insert(55, "...")
</span>
}
else
{
<span title="@item.LinkName">
@item.LinkName
</span>
}
</h5>
<div class="btn-toolbar">
<div class="btn-group link-actions" role="group">
<button type="button" class="btn btn-default btn-link-favourite"> <span class="fa fa-star" aria-hidden="true"></span></button>
<button type="button" class="btn btn-default btn-link-private"><span class="fa fa-eye" aria-hidden="true"></span></button>
<button type="button" class="btn btn-default btn-link-share"><span class="fa fa-share" aria-hidden="true"></span></button>
<button type="button" class="btn btn-default btn-link-edit"><i class="fa fa-pencil"></i></button>
<button type="button" class="btn btn-default btn-link-remove"><span class="fa fa-times" aria-hidden="true"></span></button>
</div>
<div class="btn-group social-buttons" role="group">
<button type="button" class="btn btn-default"><span class="fa fa-heart" aria-hidden="true"><span class="badge">42</span></span></button>
<button type="button" class="btn btn-default"><span class="fa fa-comment" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
***Начинается модальное окно***
<div class="modal" id="showLink" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">
<a href="@item.LinkAddress" style="text-decoration:none" target="_blank">
@item.LinkName
</a>
</h4>
</div>
<div class="modal-body linkBodyModal col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-7 col-md-7 col-sm-7">
<img class="linkImg" src="http://checkitlink.com/img/screen/3596.jpeg">
</div>
<div class="col-lg-5 col-md-5 col-sm-5">
<p>Автор: @item.UserAuthor</p>
<p>Категория: @item.LinkCategory</p>
<p>Дата: @item.CreatedAt</p>
</div>
</div>
<div class="modal-body linkBodyModal col-lg-12 col-md-12 col-sm-12">
@if (item.LinkDescription == null)
{
<p></p>
}
else
{
<p>
@item.LinkDescription
</p>
}
</div>
<div class="modal-footer">
<a href="@item.LinkAddress" target="_blank" type="button" class="btn btn-success">Перейти по ссылке</a>
<button type="button" class="btn btn-danger" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
}
Ответы (1 шт):
Автор решения: Максим Рыжак
→ Ссылка
Всем, кто ищет информацию по данному вопросу. Гениальное, как всегда, просто.
Чтоб не ковырятся с JS, в цикле каждому блоку присваиваем ID карточки data-target="#@item.LinkID" (в моем случае)
<div class="col-xs-12 col-sm-4 col-md-4 link-item linkCard">
<div class="thumbnail">
<img class="imgCardLink" data-toggle="modal" data-target="#@item.LinkID" title="Подробнее..." src="http://checkitlink.com/img/screen/3596.jpeg">
<div class="caption">
<h5 data-toggle="modal" data-target="#showLink">
И аналогично поступаем в модальном окне id="@item.LinkID"
<div class="modal" id="@item.LinkID" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
Теперь у карточек разные ID и у каждого модального окна ID соответствующий карточке
Всем удачи!)