[英]Dynamic bootstrap modal
好吧,我想使我的引導程序模態動態,但不知道該怎么做。.我知道我需要使用@PredictioItems.Name
但不知道在哪里:(
碼:
<div style="margin-top: 55px;" class="col-sm-10 col-sm-offset-1">
@foreach (var PredictioItems in Model.Content.Children())
{
if (PredictioItems.GetPropertyValue("checkboxchecker").Equals(true))
{
<h4 style="color: #000;">@PredictioItems.GetPropertyValue("teamvsteam")</h4>
<strong style="color: #000;">@PredictioItems.GetPropertyValue("predictinfo")</strong><br />
<img src="@Umbraco.TypedMedia(PredictioItems.GetPropertyValue("matchimage")).Url" />
<p style="color: #000">@Umbraco.Truncate(PredictioItems.GetPropertyValue("predictdescription").ToString(), 25)</p>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">View full description & Livestream!</button>
<hr />
}
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">@PredictioItems.GetPropertyValue("teamvsteam")</h4>
</div>
<div class="modal-body">
<p>@PredictioItems.GetPropertyValue("predictdescription")</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
</div>
有人可以告訴我要更換什么才能使其工作? 謝謝 :)
像這樣的事情應該做到這一點-如@vel所說,每個可能的模式“實例”必須具有唯一的ID,並且打開它的按鈕應引用該ID:
<div style="margin-top: 55px;" class="col-sm-10 col-sm-offset-1">
@foreach (var PredictioItems in Model.Content.Children())
{
if (PredictioItems.GetPropertyValue("checkboxchecker").Equals(true))
{
<h4 style="color: #000;">@PredictioItems.GetPropertyValue("teamvsteam")</h4>
<strong style="color: #000;">@PredictioItems.GetPropertyValue("predictinfo")</strong><br />
<img src="@Umbraco.TypedMedia(PredictioItems.GetPropertyValue("matchimage")).Url" />
<p style="color: #000">@Umbraco.Truncate(PredictioItems.GetPropertyValue("predictdescription").ToString(), 25)</p>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal@(PredictioItems.Id)">View full description & Livestream!</button>
<hr />
}
<div id="myModal@(PredictioItems.Id)" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">@PredictioItems.GetPropertyValue("teamvsteam")</h4>
</div>
<div class="modal-body">
<p>@PredictioItems.GetPropertyValue("predictdescription")</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.