我必須通過單擊打開模式對話框 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'