[英]Bootstrap : Show modal window on image click in a loop
i have to open image modal window on image click in a loop . 我必须在循环单击图像时打开图像模式窗口。 this is what i am doing that does not produce required results .
这就是我在做的,不会产生所需的结果。 Kindly check if logic is correct or something is wrong with it
请检查逻辑是否正确或有问题
<?php for ($i=0; $i<5;$i++):?>
<a id = "<?=$i?>" href="#"><img src="https://i.stack.imgur.com/6Molf.png?s=48&g=1" alt=""> </a>
<div class="modal fade" id="<?=$i?>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
</div>
<div class="modal-body">
Some content
</div>
</div>
</div>
</div>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#<?=$i?>").click(function () {
$('#<?=$i?>').modal('show');
});
});
</script>
<?php endfor;?>
a black layer comes on top of it but modal does not show up see attached image 黑色层位于其顶部,但模态不显示,请参见附件图像
Try this , Hope it will work 试试这个,希望它能起作用
<?php for ($i=0; $i<5;$i++):?>
<a id = "<?=$i?>" class="aclick" href="#"><img src="https://i.stack.imgur.com/6Molf.png?s=48&g=1" alt=""> </a>
<div class="modal fade" id="modal_<?=$i?>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
</div>
<div class="modal-body">
Some content
</div>
</div>
</div>
</div>
<?php endfor;?>
SCRIPT :- 脚本:-
$(".aclick").click(function (e) {
e.preventDefault();
var id = $(this).attr('id');
console.log(id);
$('#modal_'+id).modal('show');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.