Javascript 我必须打开模式对话框，点击功能（JQUERY和引导）不起作用

我已经通过javascript函数和JQUERY添加了图像，一切正常。但是现在我需要在每个图像上添加“点击”事件。当我点击一些图片时，应该是同一张照片，但更大，有一个模块对话框。但它不起作用。我在什么地方做错了什么。 尝试使用JQUERY“on click”函数以及引导，但由于提供了一个从数组JSON对象“title”属性获取的ID，因此将为显示的图像提供一个ID。我不知道该怎么说

 <div id="imageContainer"></div>

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div id="myModal" class="modal">
            <span class="close">&times;</span>
            <img class="modal-content" id=img01>
            <div id="caption"></div>
        </div>
    </div>
 </div>

#imageContainer img {
    width: 30%;
    height: 250px;
    padding: 10px;
    border: 5px solid grey;


}

#myModal{
    display:none;
}

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

  /* Modal Content (image) */
  .modal-content {
    margin: auto;
    display: block;
    width: 50%;
    max-width: 200px;
  }

  /* Caption of Modal Image */
  #caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
  }


(function (){
const arrayImg = [
        {
            filename: "20140222_131314",
            title:"img1",  

        },
        {
            filename:"20140712_203709",
            title:"img2",

        },
        {
            filename:"20190318_182928",
            title:"img3"
        },
        {
            filename:"20190422_181219",
            title:"img4"
        }
    ]
    for (let i = 0 ; i< arrayImg.length ; i++) {
        const arrImg = arrayImg[i]
        const imageContainer = $("#imageContainer");
        imageContainer.append(`<img id=${arrImg.title} src=photos/${arrImg.filename}.jpg>`);
    }
   /*
   array_img.forEach()
*/

}());

let modal = $('#myModal')
let modalImg = $('#img01')

let $img = $("#imageContainer img");
$img.click(function(test){
    $('.modal').css('display',"block");
    modalImg.src = this.src


    let span = document.getElementsByClassName("close")[0];
    span.onclick = function() { 
        $('.modal').css('display',"none");
    }

})
///OR 
let modal = document.getElementById('myModal')
let modalImg = document.getElementById('img01')

let img = document.getElementsByTagName(" img");

img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
  }

&时代；
`);
}
/*
数组\u img.forEach（）
*/
}());
let modal=$（“#myModal”）
设modalImg=$（“#img01”）
设$img=$（“#imageContainer img”）；
$img.单击（功能（测试）{
$（'.modal'）.css（'display'，'block'）；
modalImg.src=this.src
设span=document.getElementsByClassName（“close”）[0]；
span.onclick=function（）{
$（'.modal'）.css（'display'，'none'）；
}
})
///或
让modal=document.getElementById（'myModal'）
让modalImg=document.getElementById（'img01'）
设img=document.getElementsByTagName（“img”）；
img.onclick=函数（）{
modal.style.display=“块”；
modalImg.src=this.src；
captionText.innerHTML=this.alt；
}

---

但我不确定是否正确引用了

let modalImage

。

您有以下CSS规则：

#myModal{
    display:none;
}

---

另外，尝试控制模式可见性是JS与CSS类和可见性，这是你的错误在引导模式下显示和隐藏的行为是自动的，请查看以下文档和示例：

我就是这样做的，而且很有效

<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content">
</div>

let $modal = $('.modal')
let $img = $("#imageContainer img");
$img.click(function(){
    $('.modal-content').attr('src', $(this).attr('src'));
    $modal.css('display', 'block')


    let $span = $(".close");
    $span.click(function() { 
        $('.modal').css('display',"none");
    })
 }) 

&时代；
我有另一个类似的问题，我再次陷入困境。
如果有人能告诉我我的错误，那将是伟大的，因为我看不到它

我又有了一个图像库，每个图像都在一个单独的
中，具有相同的类名，我需要在单击时访问图像，并打开一个带有所选图像的模式对话框（较大）

是的，但是点击我让它显示：block

@Jefry90我明白了，我在几个月前做了这个，我很抱歉，但我认为这是一个新手的错误，并导致了问题，因为引导模式集成了逻辑来交换它们的可视性。我只是按类名而不是按ID来获取它，它成功了，我的错误，就在CSS中，它被引用为类的

display:none

，而不是ID:）都很好。再次感谢你。

<div id="imageContainer">
 <div class="imgBox">
  <img class="jsonImage" id="image_id_001" src="Photos/_DSC0150.jpg">
  <p>Title001</p>
</div>
<div class="imgBox">
  <img class="jsonImage" id="image_id_002" src="Photos/_DSC0226.jpg">
  <p>Title002</p>
</div>
 <div class="imgBox">
  <img class="jsonImage" id="image_id_001" src="Photos/_DSC0150.jpg">
  <p>Title001</p>
</div>
<div class="imgBox">
  <img class="jsonImage" id="image_id_002" src="Photos/_DSC0226.jpg">
  <p>Title002</p>
</div>
<div id="myModal" class="modal">
        <img id="current" class="modal-content" />
</div>

    const modal = $('#myModal'),
    let image = $('.imgBox img')
    image.click(function() {   
        modalContent.attr('src', $(this).attr('src'));
        modal.css('display', 'block');
        googleMap.css('display','none');

I keep getting message that `"image" is not a function'