2

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

现在我试图在不使用 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 的情况下仅使用数据属性来实现这一点？

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

编辑：

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

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

4

1 回答 1

2

我认为您应该使用灯箱插件或模式。

灯箱插件

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

  1. 将https://github.com/ashleydw/lightbox中的 javascript 文件包含到您的文档中：<script src="//rawgithub.com/ashleydw/lightbox/master/js/ekko-lightbox.js"></script>
  2. 添加一个链接到您的图像data-toggle="lightbox"：

-

<a href="http://distilleryimage6.ak.instagram.com/ba70b8e8030011e3a31b22000a1fbb63_7.jpg" data-toggle="lightbox">
<img src="http://distilleryimage6.ak.instagram.com/ba70b8e8030011e3a31b22000a1fbb63_7.jpg" class="img-responsive">
</a>

除了插件之外，不需要更多的javascript。

更新

我可以给这个灯箱添加一个标题吗（比如模态框的标题？）

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

<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>

演示：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) {

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

如果您还向源添加带有 id 的模态结构，#myModal则可以将图像加载到模态中：

<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>

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

于 2013-10-05T22:44:24.703 回答