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

这是我工作旁边写的代码段。 未经测试，只是想法如何解决这种情况。

- ＆GT; 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分钟，所以让我给你一个提示：

上面的这个片段非常“随意”。你应该创建“缩略图”（我指的是低分辨率图像 - ＆gt; 1.min.jpg）。

只需将源代码“.min”替换为“”并加载您的高分辨率图像。这是创建图库的优化方式。

单击该图像如何在弹出窗口中显示图像？

2 个答案: