Bootstrap 模态弹出多个图像

Question

我创建了一个模态框，单击链接时会弹出模态框。现在页脚有多个链接属于多个图像。我想在同一个弹出窗口中打开这些图像。有什么想法吗？

Answer 1

我不确定你在后端使用的是什么语言，但这里有一个使用 javascript/jquery/angular 的解决方案，我相信如果你想要的话，你可以根据自己的喜好进行更改。

index.html

    <div class="row">
    <div class="col-md-12">
        <a id="modal-456343" href="#modal-container-456343" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
        <div class="modal fade" id="modal-container-456343" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            ×
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            Modal title
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div style="width:100px; height:100px">
                        <img id="i" src="\images\fun.png" style="width:100%; height:100%">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" ng-click="changeImage('img1')">
                            Image 1
                        </button>
                        <button type="button" class="btn btn-primary" ng-click="changeImage('img2')">
                            Image 2
                        </button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Close
                        </button> 
                        <button type="button" class="btn btn-primary">
                            Save changes
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

javascript.js

$scope.imgUrls = {
    img1: "/images/yeoman.png",
    img2: "/images/fun.png"
}

$scope.changeImage = function(img){
    if(img == "img1") $("#i").attr('src', $scope.imgUrls.img1);
    if(img == "img2") $("#i").attr('src', $scope.imgUrls.img2);
}

此示例允许您单击两个按钮（可以将它们更改为您想要的任何元素，然后添加一个 onclick（我的是​​ ng-click，因为有角度）来单击它们，然后它会相应地更改图像。