繁体   English   中英

引导模态不显示我的可点击图片?

[英]bootstrap modal not showing my clickable image?

我正在symfony项目上,在我的树枝视图中,我正在从数据库中获取图像列表,当我单击任何图像时,我希望使它们可点击s,出现一个模态弹出窗口,显示我的图像

这是我对模态的看法

 <div class="container-fluid" style="padding-top: 70px;display: block;">
                            {% for i in img2|slice(0,4) %}
                                <div id="membre_panel" style="display:inline-flex;">
                                    <div id="img_style_grp" style="margin-right: 5px;">
                                        <a href="#" class="pop">
                                        <img src="{{ i.lien }}" id="1" data-toggle="modal" data-target="#myModal" style="width: 90px;height: 70px;">
                                        </a>

                                        <!-- Creates the bootstrap modal where the image will appear -->
                                        <div id="myModal" class="modal fade" role="dialog">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-body">
                                                        <img  id="imgsrc"class="showimage img-responsive" src="" />
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                                {% endfor %}
                        </div>

这是我的剧本

  <script>
    $(document).ready(function () {
        $('img').on('click', function () {
            var image = $(this).attr('src');
            alert(image);
            $('#myModal').on('show.bs.modal', function () {
                $("#imgsrc").attr("src", image);
            });
        });
    });
</script>

这是我在图像上单击一个空弹出窗口时得到的 产量

我发现问题来自于.on函数,当我切换显示时出现了照片,但它不适合模式div

 <script>
                            $(document).ready(function () {
                                $('img').on('click', function () {
                                    var image = $(this).attr('src');
                                    $('#myModal').show('show.bs.modal', function () {
                                        $(".showimage").attr('src',image);
                                    });
                                });
                            });
                        </script>

模态输出

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM