bootstrap模式没有显示我的可点击图像?

时间:2017-02-10 16:52:12

标签: javascript jquery symfony twig bootstrap-modal

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

这是我对模态的看法

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

这是我点击图片时得到的 一个空的弹出窗口 output

1 个答案:

答案 0 :(得分:0)

我发现问题来自.on功能,当我切换它显示照片出现但它不适合模态div

$s= $this->ShowFare->find('all');

Array
(
  [0] => Array
    (
        [ShowFare] => Array
            (
                [id] => 21
                [press_release_id] => 14
                [category] => 0
                [title] => pr
                [image_name] => 1486719733.jpg
                [crop_image] => 1486719729.jpg
                [is_default] => 0
                [is_active] => 0
                [created] => 2017-02-10 09:42:13
                [created_by] => 0
                [modified] => 2017-02-10 09:42:13
                [modified_by] => 0
                [deleted] => 0000-00-00 00:00:00
                [deleted_by] => 0
            )

        [PressRelease] => Array
            (
                [id] => 
                [title] => 
            )

    )

[1] => Array
    (
        [ShowFare] => Array
            (
                [id] => 22
                [press_release_id] => 7
                [category] => 0
                [title] => abcd
                [image_name] => 1486721484.jpg
                [crop_image] => 1486721481.jpg
                [is_default] => 0
                [is_active] => 0
                [created] => 2017-02-10 10:11:24
                [created_by] => 0
                [modified] => 2017-02-10 10:11:24
                [modified_by] => 0
                [deleted] => 0000-00-00 00:00:00
                [deleted_by] => 0
            )

        [PressRelease] => Array
            (
                [id] => 7
                [title] => ht48 hours, 04 March 2016
            )

    )

 )

modal output