[英]can't hide bootstrap modal with jquery
My modal appears when I click a small img with class modalphotos However when i click the image to close it, the event handler doesn't respond. 当我单击带有类modalphotos的小img时,将出现我的模态。但是,当我单击图像将其关闭时,事件处理程序将不响应。 The modal doesn't hide and the alert doesn't pop up. 模态不会隐藏,警报不会弹出。 Does anybody know whay i'm doing wrong? 有人知道我做错了吗?
//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
in the HTML i have a section with id modal 在HTML中,我有一个ID模态的部分
<!-- Modal -->
<section id="modal" class="modal fade">
<div class="modal-body">
<img id="modalimage" src="">
</div><!-- modal-body -->
</section>
And in an aside i have some photo's 顺便说一句,我有一些照片
<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>
The use would be that when i click a photo i get the modal showing the large version of the image 用途是,当我单击照片时,我会看到显示图像大图的模态
Nesting event handlers is a bad idea. 嵌套事件处理程序是一个坏主意。 Can you also share the HTML so it gives a better idea what you are trying to achieve. 您是否也可以共享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');
});
As I said before nesting events is not a good idea. 正如我在嵌套事件之前所说,这不是一个好主意。 So we separate the events. 因此,我们将事件分开。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.