簡體   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