Я должен открыть модальное диалоговое окно с функцией щелчка (JQUERY и Bootstrap) не работает - PullRequest
Новая
       5

Я должен открыть модальное диалоговое окно с функцией щелчка (JQUERY и Bootstrap) не работает

1 голос
/ 25 октября 2019

Я добавил изображения с помощью функции javascript и JQUERY, все работает. Но теперь мне нужно добавить событие «при нажатии» на каждое изображение. Когда я нажимаю на какое-то изображение, должна появиться та же фотография, но больше с модульным диалогом. Но это не работает. Я делаю что-то неправильно где-то. Пробовал с функцией JQUERY "on click", а также с Bootstrap, но с тех пор присваиваю присоединенным изображениям идентификатор, который берется из свойства "title" объекта JSON массива. Я не был уверен, как ссылаться на него. 

 <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 ссылаются правильно.

Ответы [ 3 ]

1 голос
/ 25 октября 2019

У вас есть это правило CSS: 

#myModal{
    display:none;
}

также попробуйте контролировать модальную видимость JS с помощью CSS-выражений и видимости, это ваша ошибка. Поведение для отображения и скрытия является автоматическим в модале начальной загрузки , пожалуйста, просмотрите документацию и примеры как это: https://www.w3schools.com/bootstrap/bootstrap_modal.asp

0 голосов
/ 03 ноября 2019

У меня есть другая проблема, похожая на эту, и я снова застрял. Если кто-то может показать мне мою ошибку, это будет здорово, так как я НЕ вижу ее.

У меня снова есть галерея изображений с каждым изображением в отдельном <div> с тем же именем класса, и мне нужно получить доступ к изображению по щелчку и открыть модальное диалоговое окно с выбранным изображением (больше) 

<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'
0 голосов
/ 25 октября 2019

Я сделал это так, и это работает. 

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