Question

我有一堆带有一堆图像的模态。图像是可选择的，在我点击后，我将模态按钮文本更改为图像名称。但是我也想抓住图像和显示。我不知道怎么做，因为我没有使用javascript的经验。

html模式代码：

<button type="button" id="modal-btn" class="btn btn-primary" data-toggle="modal"
        data-target="#myModal">
    Click to launch Image Gallery...
</button>
<div id='div_img_name'></div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Image Gallery</h4>
            </div>
            <div class="modal-body">
                {% for image in images %}
                    <input class="img" type="image" src="{{ image.url }}"
                           height="100" width="130"
                           style="padding-right: 3px;padding-bottom: 3px;">
                {% endfor %}
            </div>
        </div>
    </div>
</div>

用于更改按钮文字的js：

<script type="application/javascript">
    $('#myModal').on('shown.bs.modal', function () {
        $('#myInput').focus()
    })
    $(".img").click(function () {
        $("#modal-btn").text($(this).attr('src'));
        $('#myModal').modal('hide');
        return false;
    })
</script>

如何在div_img_name div中显示所选图像？

Answer 1

这样的事情怎么样？

<script type="application/javascript">
    $('#myModal').on('shown.bs.modal', function () {
        $('#myInput').focus()
    })
    $(".img").click(function () {
        var img = $(this).attr('src');
        $("#modal-btn").text(img);
        $('#div_img_name').prepend('<img class="img" type="image" src="' + img + '" height="100" width="130"/>');
        $('#myModal').modal('hide');
        return false;
    })
</script>

Bootstrap：从模态获取图像

1 个答案: