在没有JavaScript的情况下将数据传递给Bootstrap Modal

我的页面上有一个带有图像链接的网格。 单击其中一个时，模式应弹出图像，但格式为大。

现在我试图在不使用javascript / jquery但只使用数据属性的情况下实现这一点。

目前我有这个代码：

  {{ HTML::image("img/$photo->Link", "$photo->Title", array("class"=>"thumbnail col-md-3")) }}   
 
 
 
 
 
HEADER
 
 
 
 BODY 
 
 
 
My Footer
 
 
 
 
  

是否可以使用数据属性实现这一点而不使用javascript？

我正在使用Twitter Bootstrap Modal和Lightbox for Bootstrap 3插件

编辑：

当然我已经添加了lightbox插件的脚本，当点击这个我没有远程访问时怎么样？

Answer 1

我认为你应该使用灯箱插件或模态。

灯箱插件

该插件提供模态结构，因此您不必将模态html结构添加到源

1. 将来自https://github.com/ashleydw/lightbox的javascript文件包含到您的文档中：
2. 使用data-toggle="lightbox"为您的图片添加链接：

–

除了插件，不需要进一步的JavaScript。

更新

我可以为这个灯箱添加标题（就像模态中的标题吗？）

该插件似乎可以选择设置页眉/页脚。 但是当前版本没有正确的结构来设置它们。 我重写插件以更好地适应Bootstrap 3，请参阅： https ： //github.com/bassjobsen/lightbox 。 现在，您可以使用data-title设置标题，如：

演示： http ： //bootply.com/85855

Bootstrap的模态：

模态有一个提供远程URL的选项。 这应该是一个提供模态结构的有效URL，参见： Bootstrap 3 with remote Modal 。 因此无法通过数据属性直接在模态中加载图像。 其他答案如https://stackoverflow.com/a/18463703/1596547演示了如何做到这一点。 将这些答案与https://stackoverflow.com/a/10863680/1596547结合使用，您可以编写如下内容：

 $('#myModal').on('show.bs.modal', function (e) { $('').load(function() { $(this).appendTo($('#myModal .modal-body')); }); }); 

如果你还将一个id为#myModal的模态结构添加到你的源代码中，你可以在一个模态中加载你的图像：

 show image 

演示： http ： //bootply.com/85814