I have to open modal dialog with on click function (JQUERY and Bootstrap ) not working

Question

I have appended the images via javascript function and JQUERY, everything is working.But now i need to add "on click" event on every image. When i click on some image there should the same photo but bigger with a modul dialog. But it does not working. I do somehting wrong somewhere. 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. I was not sure how to refer to it.

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

But i am not sure that let modalImage is refered to correctly.

Answer 1

You have this CSS rule:

#myModal{
    display:none;
}

also try control the modal visibility is JS with CSS clases and visibility, it's your error. The behaviour to show and hide is automatic in bootstrap modal , please review documentation and examples as this: https://www.w3schools.com/bootstrap/bootstrap_modal.asp

Answer 2

I made it like that and it works.

<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

I have another issue similar to that and again i am stuck. If someone can show me my mistake, it will be great as i can NOT see it.

I have a image gallery again with every image in a separate <div> with same class name and i need to access the image on click and open a modal dialog with the selected image (bigger)

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

And part of my JS code for the modal Dialog:

    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'