Wie öffne ich mehrere Bilder auf einer einzigen Taste

Question

Ich machte vier Tasten mit einzelnen Bootstrap modal & eine Schaltfläche im Bootstrap-modal zu öffnen Bild nach Klicken auf vier Schaltflächen.

Jetzt einzelne Bootstrap-modal ist offen für jede Taste & eine Taste innerhalb modal klicken ("Open Document") I auf, die wie arbeiten wollen ...

Wenn jemand offen modal durch Öffnen Modal2 dann auf Klick " Dokument öffnen "sollte offen sein Bild nach Modal 2

Ich bin dazu nicht in der Lage, jemand kann es tun?

.buttons{ margin:20px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="buttons"> 
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Moda2</button> 
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Moda3</button> 
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Moda4</button> 
 
</div> 
 

 
<!-- Modal --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
<button class="btn btn-success" onClick="window.open('https://i.stack.imgur.com/SdR1m.jpg','_self')">Open Document</button> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

enter image description here

Answer 1

Hier ist Ihre Lösung Mate:

$(".modelButton").click(function(){ 
 
    $(".modelDocButton").attr("href",$(this).data("href")); 
 
});

.buttons{ margin:20px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
    <div class="buttons"> 
 
    <button type="button" class="btn btn-info btn-lg modelButton" data-toggle="modal" data-target="#myModal" data-href="https://i.stack.imgur.com/SdR1m.jpg">Open Modal</button> 
 
    <button type="button" class="btn btn-info btn-lg modelButton" data-toggle="modal" data-target="#myModal" data-href="https://i.imgur.com/3TWgv.jpg">Open Moda2</button> 
 

 
    </div> 
 

 
    <!-- Modal --> 
 
    <div id="myModal" class="modal fade" role="dialog"> 
 
     <div class="modal-dialog"> 
 

 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal 1</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
    <a class="btn btn-success modelDocButton" href="#">Open Document</a> 
 
      </div> 
 
      <div class="modal-footer">   
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 

<!-- Modal --> 
    <div id="myModal2" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal 2</h4> 
      </div> 
      <div class="modal-body"> 
    <button class="btn btn-success" onClick="window.open('https://i.stack.imgur.com/SdR1m.jpg','_self')">Open Document</button> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 

     </div> 
    </div> 

<!-- end snippet -->