Question

当我点击类modalphotos的小img时，会出现我的模态但是，当我单击图像以关闭它时，事件处理程序不响应。模态不会隐藏，警报不会弹出。有人知道我做错了吗？

  //show modals
  $('.modalphotos img').on('click', function () {
    $('#modal').modal({
        show:true,
    })

    var mysrc = this.src;
    $('#modalimage').attr('src', mysrc);
    $('#modalimage').on('click', function () {
        alert('clicked');
        $('#modal').modal('hide');
    })//hide modal
  });//show modal

HTML中的

我有一个id模态的部分

            <!-- Modal -->
            <section id="modal" class="modal fade">
                <div class="modal-body">
                    <img id="modalimage" src="">
                </div><!-- modal-body -->
            </section>

在一旁，我有一些照片

    <aside class="selectie">
            <h2>Een kleine selectie</h2>
            <div class="modalphotos phtotgrid clearfix">
                <img src="images/misc/huisje1.jpg" width="20%" height="20%">
                <img src="images/misc/huisje2.jpg" width="20%" height="20%">
                <img src="images/misc/huisje3.jpg" width="20%" height="20%">
            </div>
        </aside>

使用将是当我点击照片时，我得到模式显示图像的大版本

Answer 1

嵌套事件处理程序是个坏主意。您是否也可以共享HTML，以便更好地了解您要实现的目标。

 $('.modalphotos img').on('click', function () { 
      $('#modal').modal({ 
           show:true,
           keyboard:true //Enables user to press 'Esc' and close modal 
      }); 
 }); 
 $('#modalimage').on('click', function () { 
      $('#modal').modal('hide'); 
 });

正如我在嵌套事件之前所说的那样不是一个好主意。所以我们将事件分开。

无法用jquery隐藏bootstrap模式

1 个答案: