在没有JavaScript的情况下将数据传递到Bootstrap Modal [英] Passing data to Bootstrap Modal without JavaScript

问题描述

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

I have a grid with image links on my page. When clicking one of them a modal should pop up with the image but in big format.

现在，我正在尝试不使用javascript/jquery而是仅使用数据属性来实现这一目标.

Now I'm trying to achieve this without the use of javascript/jquery but just with data-attributes.

此刻我有以下代码:

<!-- 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来实现这一目标?

Is is possible to achieve this just with data-attributes without using javascript?

我正在使用 Twitter Bootstrap Modal 和

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

我当然已经添加了灯箱插件的脚本，当单击此脚本时，我将无法进行远程访问吗?

Of course I've added the script of the lightbox plugin and when clicking this I'm getting no remote access how come?

推荐答案

我认为您应该使用灯箱插件或模式广告.

I think you should use the lightbox plugin OR a modal.

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

The plugin provide the modal stucture so you don't have to add the modal html structure to your source

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

1. include the javascript file from https://github.com/ashleydw/lightbox to your document: <script src="//rawgithub.com/ashleydw/lightbox/master/js/ekko-lightbox.js"></script>
2. add a link to your image with 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.

Except from the plugin no further javascript needed.

更新

我可以在此灯箱中添加标题(如模式标题中的标题吗?)

can I add a title to this lightbox(like a header in a modal?)

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

The plugin seems to have the option to set a title / footer. But the current version doesn't have the right structure to set them. I rewrite the plugin to better fit Bootstrap 3, see: https://github.com/bassjobsen/lightbox. Now you can set the title with data-title like:

<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

该模式有一个提供远程URL的选项.这应该是提供模态结构的有效网址，请参阅:带有远程模态的Bootstrap 3 .因此，不可能通过data属性直接在您的模态中加载图像.其他答案，例如 https://stackoverflow.com/a/18463703/1596547 演示了如何做到这一点.将这些答案与 https://stackoverflow.com/a/10863680/1596547 结合使用，您可以编写如下内容:

The modal has an option to provide a remote URL. This should be a valid url which provide the modal structure, see: Bootstrap 3 with remote Modal. So it is not possible to load the image direct in your modal via a data attribute. Other answers like https://stackoverflow.com/a/18463703/1596547 demonstrate how to do that. With these answers in combination with https://stackoverflow.com/a/10863680/1596547 you could write something like:

$('#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的模式结构，则可以使用以下模式加载图像:

If you also add a modal structure with id #myModal to your source it will be possible to load your images in a modal with:

<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

这篇关于在没有JavaScript的情况下将数据传递到Bootstrap Modal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！