在页面上的内容上打开弹出窗口而不打开新窗口答案

【问题标题】：Opening popup over content on page without opening new window在页面上的内容上打开弹出窗口而不打开新窗口
【发布时间】：2016-03-03 01:53:19
【问题描述】：

我是网页设计、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>

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

【问题讨论】：

不要重新发明轮子。搜索 graybox 或 lightbox，因为这些是您可以添加到页面的非常标准的库。他们还为您完成所有工作:-)
嗨@Jeff，我已经下载了一个要使用的灯箱，所以我的代码现在是：

女孩朵拉一岁生日派对邀请函 A5

但这也不起作用...有什么想法吗？？？
您是否阅读/遵循了页面上的入门信息？
我做了@jeff，现在一切都好。我改变了一些东西，它终于起作用了。感谢您的帮助。

标签： html css

【解决方案1】：

尝试使用 JQUERY。

添加一个

<div id='overlay'>

将您的图像添加到页面中。在您的 Header 中添加相应的代码：

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

点击href --> $('#overlay').show();

请仔细阅读 Jquery 文档！！！

【讨论】：

【解决方案2】：

使用fancyBox

注意：演示在全屏下效果最佳，因为弹出的图像将是全尺寸的。我这里使用了两张不同的图片来展示大小差异，但是如果anchor和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>

【讨论】：

女孩朵拉一岁生日派对邀请函 A5