我有一个缩略图库,显示缩略图图像,并在我点击缩略图时显示弹出的模态窗口。我不确定这个模型窗口代码是否在正确的位置。我的问题是 - 模式总是在页面渲染时或者在我打开模态时加载图像?问题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">×</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>