如何使用单个模式显示多个图像

Question

as per the database table rows. My page will be populated with multiple rows(currently 32) Each row has an image. I have created a button/link at the nd of each row. I need a popup (#modal) displaying the image fetching from database. as the button is clicked.

I want a particular image fetched from the database table using id passed(id given when clicked link) and displayed under the image tag in popup. Any way out? I have my code below I NEED to use ONE modal for displaying various images; fetching on time?? I am confused over it. but i know there is way out. I am sorry if I am not clear.

 // there will be many links depending on the no. of rows in database <a href="#checkImage" data-toggle="modal"> Image </a> <div class="modal fade" id="checkImage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" style="color:black;" id="myModalLabel">Reset Password</h4> </div> <div class="modal-body" style="color:black;"> <h1>Your Image</h1> <img src=#fetchedImageFromDB> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

Answer 1

You can use another data attribute to your anchor.

<a href="#checkImage" data-toggle="modal" data-myimage="imageurl.jpg">  Image </a>

Then, in your modal, get the "myimage" (not use Uppercase character to avoid compatibility issues) value and put it inside your modal. Your Javascript library should help you.

It should work...