Bootstrap Modal Popup Несколько изображений

Question

Я создал модальный, где при щелчке ссылки модальные всплывают. Теперь на нижнем колонтитуле есть несколько ссылок, которые принадлежат нескольким изображениям. Я хочу открыть эти изображения в том же всплывающем окне. Любая идея как?

Answer 1

Я не уверен, какой язык вы используете для серверной части его, но здесь решение с помощью JavaScript/JQuery/Угловая Я уверен, что вы будете в состоянии изменить его по своему вкусу, если ему это то, что вы хотите.

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 (шахта нг - щелкнуть из-за углового), чтобы щелкнуть их, а затем соответствующим образом изменить изображения.