需要加載圖像作爲模態點擊自舉CSS

我已經嘗試加載一個模態圖像通過退色背景點擊圖像。需要加載圖像作爲模態點擊自舉CSS

它適用於我。但對於多個圖像，我怎樣才能加載我已經點擊的圖像基於圖像ID而不寫多個模態的div。

<!DOCTYPE html> 
<html> 

    <head> 
    <title>Sample</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Bootstrap --> 
    <link href="./dist/css/bootstrap.css" rel="stylesheet"> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://code.jquery.com/jquery.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="./dist/js/bootstrap.js"></script> 
    </head> 

    <body> 
    <form class="form-horizontal" role="form"> 
     <!-- Image trigger modal --> 
     <img src="http://sheshtawy.files.wordpress.com/2010/05/extra-firefox.png" id="img1" class="img-responsive img-thumbnail" style="min-height:300px;height:300px;" data-toggle="modal" data-target="#myModal" alt="Responsive image"> 

     <!-- Modal --> 
     <div class="modal fade" id="myModal" tabindex="-1" 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">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
      <img src="http://sheshtawy.files.wordpress.com/2010/05/extra-firefox.png"> 
      </div> 
     </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 
    </form> 
</body> 
</html>

來源

2013-11-22 Govan

試試這個

HTML

<!-- Image trigger modal --> 
     <img src="http://sheshtawy.files.wordpress.com/2010/05/extra-firefox.png" class="img-responsive img-thumbnail" style="min-height:300px;height:300px;" alt="Responsive image"> 
      <img src="http://sheshtawy.files.wordpress.com/2013/03/cairo_pollution.jpg?w=250"/> 
      <img src="http://sheshtawy.files.wordpress.com/2012/12/img_4749.jpg?w=250"/> 
     <!-- Modal --> 
     <div class="modal fade" id="myModal" tabindex="-1" 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">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
      <img id="mimg" src=""> 
      </div> 
     </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div><!-- /.modal -->

腳本

$(window).load(function(){ 
    $('img').on('click',function() 
       { 
        var sr=$(this).attr('src'); 
        $('#mimg').attr('src',sr); 
        $('#myModal').modal('show'); 
       }); 
});

DEMO

來源

2013-11-22 06:30:21

工作正常。 +1 – Govan

當你的圖像使用相對路徑時，你如何做到這一點？ – Harlin

需要加載圖像作爲模態點擊自舉CSS

回答

相關問題