單擊該圖像時如何在彈出窗口中顯示圖像？

Question

我在 div 中創建了多個圖像。 如果單擊任何圖像，則該圖像將顯示在另一個 div 中。（我有這個）。但如果我單擊圖像，則它將顯示在彈出窗口中。 如何在單擊該圖像時在彈出窗口中顯示圖像。

<div style="height:65px;border:solid 1px #999;"> <img src="images/startdesign images/img7.png" id="fabric" height="63" width="401"/> </div>

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">        </script>
<script language="javascript">
   $(document).ready(function(){
   $("#img").on('click',function(){
   var src = $("#img").attr('src');
   $("#modalImg").attr('src',src);

});
});

</script>
</head>
<body>

<div class="container">
   <h2>Modal Example</h2>
   <!-- Trigger the modal with a button -->
   <img src="http://images.forbes.com/media/lists/companies/google_416x416.jpg" id="img" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"></a>

   <!-- Modal -->
   <div class="modal fade" id="myModal" 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">
         <img id="modalImg">
      </div>

     </div>

   </div>
  </div>

 </div>

</body>
</html>

Answer 2

這是我工作旁邊寫的一段代碼 。 這是未經測試 ，只是一個想法如何解決這種情況。

-> http://jsfiddle.net/rsfw0w7e/2/

<div style="height:65px;border:solid 1px #999;">
    <img class="thumbnail" src="https://zapperlapapp.files.wordpress.com/2011/03/bla_bla_bla_by_explosiv22.jpg" id="fabric" height="63" width="401"/>
</div>

<div style="height:65px;border:solid 1px #999;">
    <img class="thumbnail" src="http://www.geileaufkleber.com/images/aufklber-bla-bla-bla-77110-schwarz.jpg" id="fabric" height="63" width="401"/>
</div>

window.onclick = function(e){
    if (e.target.className == "thumbnail"){
        //Make a "popup":
        var popup = document.createElement("div");
        popup.style.cssText = "background: rgb(255, 0, 0); position: absolute; height: 100%; width: 100%; left: 0; top: 0";

//Make the image:
        var new_image = document.createElement("img"); //create a new img
        new_image.src = e.target.src; //simply get the source from the thumbnail and give it to the new image

        popup.appendChild(new_image); //add it to the parent

        document.body.appendChild(popup); //add it to the element tree   
   }
}

是的，我知道-答案很無聊，因為沒有jquery。

好的，我有5分鍾的時間，所以讓我給你一個提示：

上面的這段代碼非常“隨意”。 您應該創建“縮略圖”（我的意思是低分辨率圖像-> 1.min.jpg）。

只需獲取源代碼即可將“ .min”替換為“”，然后加載高分辨率圖片。 這是創建畫廊的優化方法。

單擊該圖像時如何在彈出窗口中顯示圖像？

問題描述

1 個解決方案

解決方案1
0 2015-10-05 10:49:08

解決方案2
-2 2015-10-05 07:53:17

單擊該圖像時如何在彈出窗口中顯示圖像？

問題描述

1 個解決方案

解決方案1 0 2015-10-05 10:49:08

解決方案2 -2 2015-10-05 07:53:17

解決方案1
0 2015-10-05 10:49:08

解決方案2
-2 2015-10-05 07:53:17