如何在圖像點擊的同一頁面上的多個圖像上使用bootstrap模式？
[英]How to use bootstrap modal on multiple images on same page on image click?
問題描述
我在頁面上有大約18個圖像，我試圖在單擊圖像時在模態中顯示更大的圖像，但它每次只顯示第一個圖像。
我已經嘗試使用$(this).find('img')遍歷DOM，我嘗試使用子項，我也嘗試將圖像設置為不同的ID並將其設置為變量。
我目前的嘗試是將小圖像的路徑設置為與較大圖像路徑相同的id，然后使用find。 我現在只有前兩個圖像“設置”，因為我還不能正常工作。
順便說一下，我已經嘗試了其他放大和彈出窗口和插件的方法也沒有成功，這是我最接近的東西。
注意： 還有另一個問題顯示了幾乎相同的問題，但那里的答案對我不起作用。
<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>
腳本
$(document).ready(function () {
$('img').on('click', function () {
var picID = $(this).attr('id');
$(this).find('picID');
$('picID').modal('toggle');
});
});
4 個解決方案
解決方案1
16 已采納 2015-11-21 20:23:58
你非常接近你的目標，你有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.' />
一個模態
<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>
如果您想使用click功能使用您的方法以模態顯示圖像
$(document).ready(function () {
$('img').on('click', function () {
var image = $(this).attr('src');
$('#myModal').on('show.bs.modal', function () {
$(".img-responsive").attr("src", image);
});
});
});
或者你可以只使用bootstrap模態事件函數，不那么復雜和更好的方法（推薦的解決方案）
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function (e) {
var image = $(e.relatedTarget).attr('src');
$(".img-responsive").attr("src", image);
});
});
解決方案2
1 2015-11-21 02:45:06
你的意思是你有18個圖像，當你點擊圖像時，網站會打開一個顯示更大的圖像？
那你為什么不使用另一個插件，比如Nivo燈箱 ，它允許你打開彈出窗口來顯示圖像，甚至在打開彈出窗口時將所有圖像放在圖庫中
解決方案3
0 2015-11-21 04:28:24
我正在學習英語，所以我不確定我是否完全理解，但如果你想要通過點擊每個縮略圖來顯示模態中的不同圖像。 我認為這段代碼可以幫到你。
這是一個Jsfiddle示例： 如何在同一模態上顯示多個圖像
和代碼：
<!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>
解決方案4
0 2018-12-26 10:23:32
對於普通圖像路徑工作正常但是我有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>
如何在同一頁面的多個按鈕上打開一個Bootstrap模式？
[英]How to open one Bootstrap modal on multiple buttons on the same page?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.