我必须用点击功能（JQUERY 和 Bootstrap）打开模态对话框不起作用

Question

我已经通过 javascript 函数和 JQUERY 附加了图像，一切正常。但现在我需要在每个图像上添加“点击”事件。当我单击某个图像时，应该有相同的照片，但带有模块对话框。但它不起作用。我在某处做错了。尝试使用 JQUERY“点击”功能以及 Bootstrap ，但因为给附加的图像一个从数组 JSON 对象“标题”属性中获取的 ID。我不知道如何引用它。 <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"        }    ]但我不确定let modalImage是否正确提及。

Answer 1

你有这个 CSS 规则：

#myModal{

    display:none;

}

还尝试控制模态可见性是带有 CSS 类和可见性的 JS，这是您的错误。在 bootstrap modal 中显示和隐藏的行为是自动的，请查看文档和示例，如下所示：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'