在不打开新窗口的情况下在页面内容上打开弹出窗口

Question

我是新手，网页设计，html等。

我正在尝试从缩略图打开一个完整大小的图片，该缩略图将在页面内容上方的同一窗口中打开。

我使用的代码是：

    <div class="row">
    <div class="col-md-4">
      <div class="thumbnail"><img src="images/Invitations/Birthday Party/1st
             Birthday Dora.jpg" alt="Thumbnail Image 1" class="img4">
        <div class="caption">
          <h4><a href="images/Invitations/Birthday Party/1st Birthday Dora.jpg" 
              onclick="window.open(this.href,'targetWindow', 'toolbar=no, 
              location=no, status=no, menubar=no, scrollbars=yes, resizeable=yes, 
              width=934px, height=960px');return false;
          return false;">Girls Dora 1st Birthday Party Invitation A5</a></h4>
</div>
      </div>
    </div>

我知道这段代码会打开一个新窗口，但正如我所说的，我只是新手，我正在尝试打开页面内容上的链接。有谁能帮帮我吗？

Answer 1

尝试使用JQUERY。

添加一个

<div id='overlay'>

把你的图片放到页面上。在Header中添加相应的代码：

$('#overlay').hide()；

单击href --> $('#overlay').show()；

仔细阅读Jquery文档！

Answer 2

使用fancyBox

注意:演示在全屏时效果最好，因为弹出的图像将是全尺寸的。我在这里使用两个不同的图像来显示大小的差异，但如果锚和img标记图像是相同的图片，您将获得您正在寻找的效果。

​

$(document).ready(function() {
  $(".fancybox").fancybox({
    "type": "image"
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" />


<a class="fancybox" rel="group" href="http://lorempixel.com/800/800">
  <img src="http://lorempixel.com/100/100" alt="" />
</a>

​