我不得不打开模式对话框，点击功能(JQUERY和Bootstrap)不起作用

Question

我已经通过javascript函数和JQUERY添加了图像，一切都正常。但现在我需要在每张图片上添加"点击"事件。当我点击一些图片时，应该有相同的照片，但更大的模块对话框。但它不起作用。我在某个地方做错了什么。尝试使用JQUERY"on click"函数和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;
}

也尝试控制模式可见性是JS与CSS类和可见性，这是你的错误在引导模式下显示和隐藏的行为是自动的，请查看文档和示例如下：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>中，具有相同的类名，我需要点击访问该图像，并用所选图像(更大(打开模式对话框

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