如何打開單個按鈕上的多個圖片

我做了四個按鈕與單引導模態&一個按鈕在引導模式打開圖片，按一下四個按鈕。如何打開單個按鈕上的多個圖片

現在單一的引導模式是每個按鈕上單擊打開&一個按鈕內模態（「打開文件」），我想對喜歡工作...

如果通過開放式Modal2任何人開放模式，然後點擊「打開文件「應該打開圖片按照模式2

我無法做到這一點任何人都可以做到這一點？

.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

來源

2017-07-07 Rohit Verma

這裏是您的解決方案的伴侶：

$(".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 -->

來源

2017-07-07 08:12:17

如何打開單個按鈕上的多個圖片

回答

相關問題