我必须通过单击打开模式对话框 function （JQUERY 和 Bootstrap ）不起作用

Question

我已经通过 javascript function 和 JQUERY 附加了图像，一切正常。但是现在我需要在每个图像上添加“点击”事件。 当我点击一些图像时，应该有相同的照片但更大的模块对话框。 但它不起作用。 我在某处做错了什么。 Tried with JQUERY "on click" function and as well with Bootstrap, but since give the appened images an ID which is taken from the array JSON object "title" property. 我不知道如何引用它。

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

Answer 3

我有另一个类似的问题，我又被卡住了。 如果有人能告诉我我的错误，那就太好了，因为我看不到它。

我再次有一个图像库，每个图像都在一个单独的<div>中，具有相同的 class 名称，我需要在单击时访问图像并打开一个带有所选图像的模式对话框（更大）

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

我的模态对话框的部分JS代码：

    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'