Jquery 不使用JavaScript将数据传递到引导模式

我的页面上有一个带有图像链接的网格。单击其中一个按钮时，会弹出一个模式，其中包含图像，但格式较大

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

目前我有以下代码：

<!-- Generating the image link with PHP (laravel) -->    
<a data-toggle="modal" href="#myModal"> {{ HTML::image("img/$photo->Link", "$photo->Title", array("class"=>"thumbnail col-md-3")) }} </a>

<!--The modal -->
    <section class="row">
                <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">
                          <h4 class="modal-title text-center">HEADER</h4>
                        </div>
                        <div class="modal-body">
                          <p> BODY </p>
                        </div>
                        <div class="modal-footer">
                          <p>My Footer</p>
                        </div>
                      </div>
                    </div>
                </div>      
        </section>

标题
身体

我的页脚

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

我正在使用和

编辑：

<div  class="imgLink col-md-3"> 
    <a data-toggle="lightbox">
            <img src="../img/5.jpg" class="thumbnail"> 
    </a>
</div>

---

当然，我已经添加了lightbox插件的脚本，当单击此按钮时，我无法远程访问。为什么？

我认为您应该使用lightbox插件或modal

灯箱插件 该插件提供了模式结构，因此您不必将模式html结构添加到源代码中

将来自的javascript文件包含到文档中：

使用

data toggle=“lightbox”

向图像添加链接：

-

演示：

引导模式： 模式有一个选项来提供远程URL。这应该是提供模式结构的有效url，请参阅：。因此，无法通过数据属性直接在模式中加载图像。其他答案如演示如何做到这一点。结合这些答案，你可以写出如下内容：

$('#myModal').on('show.bs.modal', function (e) {

            $('<img class="img-responsive" src="'+ e.relatedTarget.dataset.remoteImage+ '">').load(function() {
  $(this).appendTo($('#myModal .modal-body'));
});
});

---

演示：

尝试使用lightbox插件，但当执行您所说的操作时，我得到：

没有给定远程目标

在我的lightbox中，我将用代码片段更新我的问题没有远程目标，您必须将图像的url添加到href属性。比如：

哦，好酷！工作，附带问题：我可以给这个灯箱添加标题吗（比如模式中的标题？）我不知道，我会看看。我也没有看到关闭按钮（默认设置）。您是否也尝试过引导的模式解决方案？添加一个标题并靠近模态很容易（它已经存在了）。或者你能告诉我模态和灯箱的区别吗？请参阅我关于如何添加标题的更新答案

<div class="container">
<div class="row">
    <a id="mylink" data-title="My LightBox" href="http://distilleryimage6.ak.instagram.com/ba70b8e8030011e3a31b22000a1fbb63_7.jpg" data-toggle="lightbox" data-gallery="multiimages" class="col-sm-4">
                                <img src="http://distilleryimage6.ak.instagram.com/ba70b8e8030011e3a31b22000a1fbb63_7.jpg" class="img-responsive">
    </a>
</div>  
</div>

$('#myModal').on('show.bs.modal', function (e) {

            $('<img class="img-responsive" src="'+ e.relatedTarget.dataset.remoteImage+ '">').load(function() {
  $(this).appendTo($('#myModal .modal-body'));
});
});

<a data-toggle="modal" data-remote-image="http://distilleryimage6.ak.instagram.com/ba70b8e8030011e3a31b22000a1fbb63_7.jpg" data-target="#myModal" class="btn btn-primary btn-lg">show image</a>