在没有 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 和 Lightbox for Bootstrap 3 插件
<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
- 将 https://github.com/ashleydw/lightbox 中的 javascript 文件包含到您的文档中:
<script src="//rawgithub.com/ashleydw/lightbox/master/js/ekko-lightbox.js"></script>
- 使用
data-toggle="lightbox"
为您的图片添加链接:
- 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>
- 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>
模态框可以选择提供远程 URL.这应该是提供模态结构的有效 URL,请参阅:带远程模态的引导 3.因此,无法通过数据属性直接在模态中加载图像.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>
这篇关于在没有 JavaScript 的情况下将数据传递给 Bootstrap Modal的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!