Question

我有一个Instagram iframe可以获得9个带有href链接的随机图像（用于图片）和具有相同背景的跨度。所以我想在画廊中打开它。我使用Bootstrap弹出窗口，但弹出窗口中只打开了第一张或最后一张图片。

<a data-toggle="modal" data-target="#myModal1" href="'.$thumbnail.'" class="image"><span style="background-image:url('.$thumbnail.');">&nbsp;</span></a>

<div id="myModal1" class="modal fade" role="dialog" style="overflow-y: hidden;">
<div class="modal-dialog">
<a href="" class=""><div id="pic" class="modal-content" style="background-image:url('.$thumbnail.'); ></div></a>' 
</div>
</div>

你能帮帮我吗？

Answer 1

我做到了！

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/4.0.1/ekko-lightbox.min.css">
</head>
<body>

<a data-toggle="lightbox"  href="'.$thumbnail.'" class="image"><span id="" style="background-image:url('.$thumbnail.');">&nbsp;</span></a>

<script src="//code.jquery.com/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/4.0.1/ekko-lightbox.min.js"></script>
<script type="text/javascript">
$(document).ready(function ($) {
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
});
});
});
</script>
</body>
</html>

演示在这里[http://www.jquery-az.com/boots/demo.php?ex=17.0_1]

在弹出窗口中打开动态href链接

1 个答案: