我必须打开带有单击功能（JQUERY和Bootstrap）不起作用的模式对话框

Question

我已经通过javascript函数和JQUERY附加了图像，一切正常。但是现在我需要在每个图像上添加“ on click”事件。当我单击某些图像时，应该有相同的照片，但带有模块化对话框会更大。但这行不通。我在某处做错了。尝试使用JQUERY“单击”功能以及Bootstrap，但是由于给了所应用的图像一个ID，该ID是从数组JSON对象的“ title”属性中获取的。我不确定如何引用它。

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

但是我不确定let modalImage是否正确引用。

Answer 1

您有此CSS规则：

#myModal{
    display:none;
}

还尝试控制模式可见性是具有CSS分类和可见性的JS，这是您的错误。 显示和隐藏的行为在引导程序模式下是自动的，请按以下方式查看文档和示例：https://www.w3schools.com/bootstrap/bootstrap_modal.asp

Answer 2

我做到了，它奏效了。

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