Bootstrap : Show modal window on image click in a loop

Question

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">
                    &times;</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

Answer 1

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">
                        &times;</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');
    });