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）以单击它们然后相应地更改图像。