如何在图像点击的同一页上的多个图像上使用引导模式？ [英] How to use bootstrap modal on multiple images on same page on image click?

问题描述

我在页面上显示了大约18张图片，我试图在点击图片时在模式中显示较大的图片，但每次只显示第一张图片。

我尝试遍历与 $（this）.find（'img'） DOM的DOM，我试图与儿童也尝试将图像设置为不同的ID和设置这些作为一个变量。

我目前的尝试是将小图像的路径设置为与较大图像路径相同的id，然后使用find。我现在只有前两个设置图像，因为我现在还不能正常工作。

顺便说一句，我尝试了其他放大方法以及没有成功的弹出窗口和插件，这是最接近我的东西的工作。

注意：还有另一个问题显示几乎相同的问题，但答案没有为我工作。

 < img height = 100width =80id =1data-toggle =modaldata-target =＃myModaldata-dismiss =modalsrc ='〜/ Content / MyPics / TextDollarPart1.JPG'alt = 'Text dollar code part one。'/> 
< div id =myModalclass =modal fade> 
< div class =modal-lg> 
< div class =modal-content> 
< div class =modal-body> 
< img id =1src =〜/ Content / MyPics / TextDollarPart1.JPGclass =img-responsiveheight =1500width =1000> 
< / div> 
< / div> 
< / div> 
< / div> 
 < div id =myModalclass =modal fade> 
< div class =modal-dialog modal-lg> 
< div class =modal-content> 
< div class =modal-body> 
< img id =2src =〜/ Content / MyPics / TextDollarPart2.JPGclass =img-responsiveheight =1500width =1000> 
< / div> 
< / div> 
< / div> 
< / div> 
  

脚本

 <$ c'c> $（document）.ready（function（）{
 $（'img'）。on（'click'，function（）{
 var picID = $（this）.attr ''）; 
 $（this）.find（'picID'）; 
 $（'picID'）。modal（'toggle'）; 
}）; 
 }）; 
  

解决方案

您非常接近您的目标，您有2 images

 < img height =100width =80id =1data-toggle =modal data-target =＃myModalsrc ='http：//tympanus.net/Tutorials/CaptionHoverEffects/images/1.png'alt ='Text dollar code part one。'/> 
   

一个模态

 < div id =myModalclass =modal faderole =dialog> 
< div class =modal-dialog> 
< div class =modal-content> 
< div class =modal-body> 
< img class =img-responsivesrc =/> 
< / div> 
< div class =modal-footer> 
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< / button> 
< / div> 
< / div> 
< / div> 
< / div> 
  

如果您想使用的方式以模态显示图片，请单击 code $函数

$ $ $ $ $ $''$'$ $ $''$（$）$（document）.ready（function（）{
$（'img' ）.on（'click'，function（）{
var image = $（this）.attr（'src'）;
$（'＃myModal'）。on（'show.bs。 （）;
}）;
}（）。 ;


小提琴

---

或者您可以使用引导模式 event 函数，不那么复杂和更好的方法（推荐解决方案）

  $（document）.ready（function（）{
 $（'＃myModal'）。on（'show.bs.modal'，function（e）{
 var image = $（e.relatedTarget）.attr（'src'）; 
 $（。img-responsive）。attr（src，image）; 
}）; 
 }）; 
  

小提琴

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.

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.

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.

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');      
    });
});

解决方案

You are very close to your goal, you have 2 images

<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 click function

$(document).ready(function () {
    $('img').on('click', function () {
        var image = $(this).attr('src');
        $('#myModal').on('show.bs.modal', function () {
            $(".img-responsive").attr("src", image);
        });
    });
});

Fiddle

---

Or you can use bootstrap modal event function only, less complicated and better approach (recommended solution)

$(document).ready(function () {
        $('#myModal').on('show.bs.modal', function (e) {
            var image = $(e.relatedTarget).attr('src');
            $(".img-responsive").attr("src", image);
        });
});

Fiddle

这篇关于如何在图像点击的同一页上的多个图像上使用引导模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！