Javascript 如何在图像单击时在同一页面上的多个图像上使用引导模式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33838977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use bootstrap modal on multiple images on same page on image click?
提问by Kirstin Walsh
I have about 18 images on the page that I am trying to display larger in a modal upon clicking the image, but it only displays the first image every time.
我在页面上有大约 18 张图像，我试图在单击图像时以模式显示更大，但它每次只显示第一张图像。
I have tried traversing the DOM with $(this).find('img')and I tried it with children also I have tried setting the images to different ids and setting these as a variable.
我尝试过遍历 DOM$(this).find('img')并与孩子们一起尝试过，我也尝试将图像设置为不同的 id 并将它们设置为变量。
My current attempt was to set the small image's path to the same id as the larger image's path and then using find. I only have the first two images "set up" for now, since I can't get it working right yet.
我目前的尝试是将小图像的路径设置为与大图像路径相同的 id，然后使用 find。我现在只“设置”了前两个图像，因为我还不能让它正常工作。
BTW, I have tried other methods of zooming in and popovers and plug-ins with no success either, this is the closest I've come to something that works.
顺便说一句，我尝试了其他放大和弹出框和插件的方法也没有成功，这是我最接近可行的方法。
Note: There is another question which shows pretty much the same issue, but the answer there didn't work for me.
注意：还有另一个问题显示了几乎相同的问题，但那里的答案对我不起作用。
<img height="100" width="80" id="1" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src='~/Content/MyPics/TextDollarPart1.JPG' alt='Text dollar code part one.' />
<div id="myModal" class="modal fade" >
<div class=" modal-lg">
<div class="modal-content">
<div class="modal-body">
<img id="1"src="~/Content/MyPics/TextDollarPart1.JPG" class="img-responsive" height="1500" width="1000">
</div>
</div>
</div>
</div>
<img height="100" width="80" id="2" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src="~/Content/MyPics/TextDollarPart2.JPG" alt="Text dollar code part two." />
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<img id="2" src="~/Content/MyPics/TextDollarPart2.JPG" class="img-responsive" height="1500" width="1000">
</div>
</div>
</div>
</div>
Script
脚本
$(document).ready(function () {
$('img').on('click', function () {
var picID = $(this).attr('id');
$(this).find('picID');
$('picID').modal('toggle');
});
});
回答by Shehary
You are very close to your goal, you have 2 images
你离你的目标很近了，你有 2 张图片
<img height="100" width="80" id="1" data-toggle="modal" data-target="#myModal" src='http://tympanus.net/Tutorials/CaptionHoverEffects/images/1.png' alt='Text dollar code part one.' />
<img height="100" width="80" id="2" data-toggle="modal" data-target="#myModal" src='http://tympanus.net/Tutorials/CaptionHoverEffects/images/2.png' alt='Text dollar code part one.' />
One Modal
一种模态
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img class="img-responsive" src="" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
If you want to show image in modal with your approach using clickfunction
如果您想使用click函数以模态显示图像
$(document).ready(function () {
$('img').on('click', function () {
var image = $(this).attr('src');
$('#myModal').on('show.bs.modal', function () {
$(".img-responsive").attr("src", image);
});
});
});
Or you can use bootstrap modal eventfunction only, less complicated and better approach (recommended solution)
或者你可以只使用 bootstrap modal event函数，更简单更好的方法（推荐解决方案）
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function (e) {
var image = $(e.relatedTarget).attr('src');
$(".img-responsive").attr("src", image);
});
});
回答by Phuong
You mean you have 18 images, when you click on a image , website will open a open to show a larger image?
你的意思是你有18张图片，当你点击图片时，网站会打开一个打开显示更大的图片？
So why don't you use another plugin such as Nivo lightbox, which allow you open a popup to show image, and even though put all your image in a gallery when open a popup
那么为什么不使用另一个插件，例如Nivo lightbox，它允许您打开一个弹出窗口来显示图像，即使打开弹出窗口时将所有图像都放在画廊中
回答by Quethzel Díaz
I am learning English, so I'm not sure if I fully understand but if you want is show different images in a modal by clicking on each thumbnail image. I think that this code can help you.
我正在学习英语，所以我不确定我是否完全理解，但是如果您想要通过单击每个缩略图以模式显示不同的图像。我认为这段代码可以帮助你。
here is an Jsfiddle example: How to show multiple images on the same modal
这是一个 Jsfiddle 示例： How to show multiple images on the same modal
And the code:
和代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<style type="text/css">
.my-img a {
display: inline-block;
margin: 10px;
border: 2px solid #CCC;
}
.my-img a:hover {
border: 2px solid #45AFFF;
}
.modal-lg {
width: 86%;
}
.modal-body {
overflow: auto;
max-height: auto;
}
</style>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<div class="row">
<div class="col-xs-12 my-img">
<a href="#" id="link1" data-toggle="modal" data-target="#myModal">
<img src="1.png" id="img1" class="img-responsive" width="250px">
</a>
<a href="#" id="link1" data-toggle="modal" data-target="#myModal">
<img src="2.png" id="img2" class="img-responsive" width="250px">
</a>
<a href="#" id="link1" data-toggle="modal" data-target="#myModal">
<img src="3.png" id="img3" class="img-responsive" width="250px">
</a>
<a href="#" id="link1" data-toggle="modal" data-target="#myModal">
<img src="4.png" id="img4" class="img-responsive" width="250px">
</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">your image title here (can be dynamic) </h4>
</div>
<div class="modal-body" id="showImg">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('img').on('click', function() {
$("#showImg").empty();
var image = $(this).attr("src");
$("#showImg").append("<img class='img-responsive' src='" + image + "' />")
//alert(image);
})
});
</script>
</body>
</html>
回答by Manish Patel
It is Work Fine For Normal image Path But I have base64 image so not work this javascript.
它适用于普通图像路径但我有 base64 图像所以不能使用这个 javascript。
<img src="<?php echo 'data:image/'.$imageFileType.';base64,'.$fetch_expance['expance_image'];?>" style="cursor: pointer;" data-toggle="modal" data-target="#myModal" width="100px" height="100px" /><br>
