即使我不打开它,我的引导模态窗口是否加载了我的图像?

时间:2015-03-18 03:06:25

标签: javascript jquery html twitter-bootstrap

我有一个缩略图库,显示缩略图图像,并在我点击缩略图时显示弹出的模态窗口。我不确定这个模型窗口代码是否在正确的位置。我的问题是 - 模式总是在页面渲染时或者在我打开模态时加载图像?问题2 - 我应该为每个缩略图(如下所示)提供模态代码,还是应该将模态代码放在一个地方并使用jquery设置图像?请指教!感谢。

这是我的html代码,显示缩略图列表

<div id="row">
                <div id="sortable">
                    @foreach (var image in Model.Images)
                    {
                        @*<li>this is an image</li>*@
                        <div class="col-sm-6 col-md-4">
                            <div class="thumbnail">
                                @{
                                    var base64 = Convert.ToBase64String(image.ImageThumbnail);
                                    var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
                                 }
                                <a href="" data-toggle="modal" data-target="#myModal">
                                    <img src="@imgSrc" alt="image not found" width="203" height="136" />
                                </a>
                                <div class="caption">
                                    <h3>Thumbnail label</h3>
                                    <p>...</p>
                                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                                </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">
                                            @{
                                                var base64Modal = Convert.ToBase64String(image.Image);
                                                var imgSrcModal = String.Format("data:image/gif;base64,{0}", base64Modal);
                                            }
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <a href="" data-toggle="modal" data-target="#myModal">
                                                <img src="@imgSrcModal" alt="image not found" width="255" height="255" />
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    }
                </div>
            </div>

0 个答案:

没有答案