小编Mic*_*ael的帖子

使用带有foreach循环的Bootstrap Modal

我有一个foreach循环从数据库循环我的文档,它只拉入IMAGES然后我在页面上每行有4个图像,我想点击一个它打开一个模态与图像,再次点击另一个相同.所以我有这个设置:

@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">&times;</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> …
Run Code Online (Sandbox Code Playgroud)

model-view-controller modal-dialog twitter-bootstrap

2
推荐指数
1
解决办法
5629
查看次数