Question

我必须在图像上点击循环打开图像模态窗口。这就是我正在做的，不会产生所需的结果。请检查逻辑是否正确或是否有问题

<?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;?>

它上面有一个黑色图层但是模态没有出现，请参见附图

Answer 1

试试这个，希望它会起作用

<?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;?>

脚本： -

$(".aclick").click(function (e) {
        e.preventDefault();
        var id = $(this).attr('id');
        console.log(id);
        $('#modal_'+id).modal('show');
    });

Bootstrap：在图像上显示模态窗口，单击循环

1 个答案: