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

时间:2013-09-30 18:31:25

标签: jquery modal-dialog lightbox twitter-bootstrap-3 custom-data-attribute

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

现在我试图在不使用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?

我正在使用Twitter Bootstrap ModalLightbox for Bootstrap 3 Plugin

修改

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

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

1 个答案:

答案 0 :(得分: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"
  3. 为您的图片添加链接

    -

    <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