花式框弹出窗口中的链接答案

【问题标题】：Links inside a fancybox popup花式框弹出窗口中的链接
【发布时间】：2012-05-30 01:15:18
【问题描述】：

我有一个不知道如何解决的问题。在我的程序中，当用户单击图像时，fancybox 脚本会运行，从而导致新图像显示为弹出窗口。但是，在该图像中，我也希望能够放置链接。基本上我想在弹出图像中使用特定宽度和高度以及位置的链接块，在链接中创建链接。这甚至可能吗？

这是一些代码：

<!--Using the fancybox functions -->
    <script type="text/javascript">
        $(document).ready(function(){
            $("#contentArea a").fancybox({
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic'

            });
            });
    </script>

这是 HTML：

<div id="contentArea" role="main">
             <a href="../images/IRPA_two-navigation-books.png" title="Raj Sharma" style="width: 217px;height: 117px;position: absolute;display: block;top: 340px;left: 450px; background-image:url(../images/transparent.png)"></a>         
</div>

如您所见，我为特定位置的块链接创建了一个精美的图片弹出窗口。如何在弹出的花式框图像中创建具有指定宽度/高度和位置的链接？

这是我正在使用的工具/库，以防万一有人感到困惑： http://fancybox.net/

谢谢！

【问题讨论】：

弹出窗口中的图片点击后是否关闭弹出窗口？
是的，应该。它应该带你到不同的页面。
另请注意，它不是将在弹出窗口中单击的图像。我想要具有指定宽度和高度的透明块链接，我可以将它们定位在弹出图像上的位置以供用户单击。

标签： javascript jquery html css fancybox

【解决方案1】：

您可以轻松做到这一点：

var html = "<!--- some html here to add to the fancybox -->";
$('#fancybox-title-over').html(html);
$('#fancybox-title-over').css('background-color' , 'transparent');

它将出现在覆盖标题中，如http://fancybox.net/ 上的第六个示例所示

【讨论】：

所以变量 html 将保存具有特定位置、宽度和高度样式的链接，然后是 $('#fancybox-title-over').html(html);只是将它应用于fancybox？听起来不错！谢谢！
@user1410668 等一下，哪个例子最接近你的？
我会说第 6 或第 7 个。他们有文字出现在图像上，但我需要一个显示为块且不可见的链接。基本上我想要一个定位链接而不是他们拥有的文本，我希望我可以设置链接的样式以具有透明背景。问题并不像添加文本那么简单。
@user1410668 - 我编辑了答案以满足您的需要。确保将花式框弹出窗口配置为使用覆盖标题。即将titlePosition 设置为'over'。