我必须用点击功能（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{&nbsp; &nbsp; display:none;}还尝试控制模态可见性是带有 CSS 类和可见性的 JS，这是您的错误。在 bootstrap modal 中显示和隐藏的行为是自动的，请查看文档和示例，如下所示：https : //www.w3schools.com/bootstrap/bootstrap_modal.asp

Answer 2

我是这样制作的，而且效果很好。<div id="myModal" class="modal">&nbsp; <span class="close">&times;</span>&nbsp; <img class="modal-content"></div>let $modal = $('.modal')let $img = $("#imageContainer img");$img.click(function(){&nbsp; &nbsp; $('.modal-content').attr('src', $(this).attr('src'));&nbsp; &nbsp; $modal.css('display', 'block')&nbsp; &nbsp; let $span = $(".close");&nbsp; &nbsp; $span.click(function() {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $('.modal').css('display',"none");&nbsp; &nbsp; })&nbsp;})&nbsp;

Answer 3

我有另一个与此类似的问题，但我又被卡住了。如果有人能告诉我我的错误，那就太好了，因为我看不到。我再次有一个图片库，每个图片都在一个单独的<div>类名中，我需要点击访问图片并打开一个带有所选图片的模式对话框（更大）<div id="imageContainer">&nbsp;<div class="imgBox">&nbsp; <img class="jsonImage" id="image_id_001" src="Photos/_DSC0150.jpg">&nbsp; <p>Title001</p></div><div class="imgBox">&nbsp; <img class="jsonImage" id="image_id_002" src="Photos/_DSC0226.jpg">&nbsp; <p>Title002</p></div>&nbsp;<div class="imgBox">&nbsp; <img class="jsonImage" id="image_id_001" src="Photos/_DSC0150.jpg">&nbsp; <p>Title001</p></div><div class="imgBox">&nbsp; <img class="jsonImage" id="image_id_002" src="Photos/_DSC0226.jpg">&nbsp; <p>Title002</p></div><div id="myModal" class="modal">&nbsp; &nbsp; &nbsp; &nbsp; <img id="current" class="modal-content" /></div>和我的模态对话框的 JS 代码的一部分：&nbsp; &nbsp; const modal = $('#myModal'),&nbsp; &nbsp; let image = $('.imgBox img')&nbsp; &nbsp; image.click(function() {&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; modalContent.attr('src', $(this).attr('src'));&nbsp; &nbsp; &nbsp; &nbsp; modal.css('display', 'block');&nbsp; &nbsp; &nbsp; &nbsp; googleMap.css('display','none');I keep getting message that `"image" is not a function'