如何在点击图片时打开图片模态

Question

我一直在研究标记图像的代码。首先，我在屏幕上显示了一组图像，点击后应该会打开一个模式。

我试过以下代码：

  <div id="gallery ">

   <?php
     foreach ($gallery as $i) {
    ?>
    <img href="#myModal" data-toggle="modal" data-target="#myModal" src="<?php echo "$i"; ?>" class="modal_img">

   <?php }
    ?>
   </div>

以上代码用于显示数组中的一组图像。以下代码我尝试创建一个模态：

  <div id="myModal" class="modal">

    <!-- The Close Button -->
    <span class="close">&times;</span>
   <input type="hidden" id="result"></input>

   <!-- Modal Content (The Image) -->
  <div id="imagearea" class="imagearea">

  <span class="right_sec_text">Draw a Box over what captured your attention</span>

  <img class="modal-content" id="img01">
  </div>
   <div class="footer_btn">
    <p><button class="btn_success" id="btn_add" value="add areas">Confirm</button>
  </div>
  </div>

Image: 显示有图像的屏幕

因此，当单击图像时，模式应该打开。我尝试了以下代码来打开模式，但它没有响应。我试图在控制台日志中获取图像名称，并且它有效。但是模态框打不开。

  $(function(){
     $(".modal_img").on("click",function(){
     var src = $(this).attr("src");
     $("#img01").prop("src",src);
     console.log(src);
    })
   })

CSS:

 #myModal {
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 1; /* Sit on top */
 padding-top: 20px; /* Location of the box */
 left: 200px;
 top: 0;
 width: 60%; /* Full width */
 height: 100%; /* Full height */
 overflow: hidden; /* Enable scroll if needed */
 background-color: rgb(0,0,0); /* Fallback color */
 background:rgba(0,0,0,0.7); /* Black w/ opacity */
 }

 /* Modal Content (Image) */
.imagearea {
 display: flex;
flex-direction: column;
float: left;
margin-right:50px;
margin-left: 100px;
max-width: 100%;
position: absolute;
}

下图是预期的输出：

谁能帮我解决这个问题。谢谢

Answer 1

要显示您的模态，您必须更改 javascript 代码

$(function(){
let modal = $('#myModal')     
$(".modal_img").on("click",function(){
     var src = $(this).attr("src");
     modal.css({"display": "block"});
     $("#img01", modal).prop("src",src);
     console.log(src);
    })
   });

如何在点击图片时打开图片模态

How to open Image modal on Image click

html

javascript

bootstrap-modal