Question

我想要一张图片，点击后会打开一个弹出窗口，显示图片所在网站的实时视图。这是我的代码：

<a class="group1" href="images/air-machine-kettle.jpg">
    <div class="portfolio-box-1 branding">
        <div class="mask-1"></div>
        <img src="images/air-machine-kettle.jpg" alt="">
        <h6>Air Machine Kettle</h6>
        <p>Web</p>
    </div>
</a>

我已尝试将第一个链接从.jpg更改为指向该网站的链接，但它表示内容无法加载。

Answer 1

您可以使用iframe标记在网页中插入任何网址。

以下是一个例子：

<iframe src="http://google.com/"></iframe>

可以在此处找到要添加到iframe的其他属性：http://www.w3schools.com/tags/tag_iframe.asp

高度
名称
沙箱
无缝
SRC
srcdoc
宽度

编辑2：我误解了原来的问题。我假设现场弹出＆＃39;意味着模态窗口中的iframe。我现在认为的目的是它是一个在新窗口中打开的链接。如果是这种情况，您需要按如下方式构建html：

<a href="http://www.airmachinekettle.com" target="_blank">
    <div class="portfolio-box-1 branding">
        <div class="mask-1"></div>
        <img src="images/air-machine-kettle.jpg" alt="">
        <h6>Air Machine Kettle</h6>
        <p>Web</p>
    </div>
</a>

编辑3：看起来问题正在发展。既不是iframe也不是新窗口打开URL而不是打开更大图像的新窗口。如果这是正确的理解，那么您想要执行以下操作：

<a class="group1" href="http://lorempixel.com/output/abstract-q-c-640-480-10.jpg" target="_blank">
    <div class="portfolio-box-1 branding">
        <div class="mask-1"></div>
        <img src="http://lorempixel.com/output/abstract-q-c-640-480-10.jpg" width="100" height="40">
        <h6>Air Machine Kettle</h6>
        <p>Web</p>
    </div>
</a>

编辑4：我们已经完整了。 OP真正看到的实际上是一个模态窗口，它将打开一个更大的缩略图，该图像被点击。

模态窗户或灯箱的例子可以在这里找到：

http://fancybox.net/home

http://www.lokeshdhakar.com/projects/lightbox2/

如何创建另一个站点的实时弹出视图

1 个答案: