title: Need to load image as modal on click in bootstrap css
body: <p>I have tried loading a modal image on clicking a image by fading the background.</p>
  
  <p>It works for me. But for multiple images how can I load the image which I have clicked based on the image id without writting multiple modal div.</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
   &lt;html&gt;
  
     &lt;head&gt;
       &lt;title&gt;Sample&lt;/title&gt;
       &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
       &lt;!-- Bootstrap --&gt;
       &lt;link href="./dist/css/bootstrap.css" rel="stylesheet"&gt;
       &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
       &lt;script src="https://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
       &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
       &lt;script src="./dist/js/bootstrap.js"&gt;&lt;/script&gt;
     &lt;/head&gt;
  
     &lt;body&gt;
       &lt;form class="form-horizontal" role="form"&gt;
         &lt;!-- Image trigger modal --&gt;
         &lt;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"&gt;
  
        &lt;!-- Modal --&gt;
        &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                &lt;h4 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h4&gt;
              &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;img src="http://sheshtawy.files.wordpress.com/2010/05/extra-firefox.png"&gt;
            &lt;/div&gt;
          &lt;/div&gt;&lt;!-- /.modal-content --&gt;
        &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
      &lt;/div&gt;&lt;!-- /.modal --&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>