FancyBox 不适用于 Div 标签和 A 标签

Question

请帮我解决这个问题。

我有一个 html 文件，其中包含一个 A 标记，该标记引用同一 html 页面中的 DIV 标记。如下所示。

<a href="#addServerDetails" class="addSign"></a>

<div id="addServerDetails" class="addServerDetail">
            <h1>hello</h1>
</div>

这是上述 gievn DIV 标签的样式属性。

.addServerDetail {
    height: 400px;
    width: 500px;
    margin-right: auto;
    margin-left: auto;
    background-color: #333;
    left: 312px;
    top: 81px;
    display: none;
}

我想使用 JQuery 淡入这个 DIV 带有覆盖效果的标签。所以我在 Jquery 中使用了 fancyBox。

Jquery 函数如下所示。

$('document').ready(function(){
    $("a.addSign").fancybox({
            'titlePosition' : 'over',
            'overlayColor' : '#000',
            'overlayOpacity' : 0.8,
            'transitionIn' : 'elastic',
            'transitionOut' : 'elastic',
            'autoScale' : true
    });
});

但没有解决。请帮助我，因为我是 Jquery 的初学者。

谢谢朋友。

编辑：Firebug 显示以下错误！

TypeError: $(...).fancybox is not a function<br />
[Break On This Error]   <br />

'autoScale' : 'true' <br />

Answer 1

不要将display:none; 分配给.addServerDetail，而是使用display:none; 作为.addServerDetail div 的包装器创建一个内联div。

JSFiddle:-http://jsfiddle.net/adiioo7/r6x92/

HTML：-

<a href="#addServerDetails" class="addSign">Show Popup</a>

<div style="display:none;">
    <div id="addServerDetails" class="addServerDetail">
         <h1>hello</h1>

    </div>
</div>

JS：-

$('document').ready(function () {
        $("a.addSign").fancybox({
            'titlePosition': 'over',
                'overlayColor': '#000',
                'overlayOpacity': 0.8,
                'transitionIn': 'elastic',
                'transitionOut': 'elastic',
                'autoScale': true
        });
});

CSS：-

.addServerDetail {
    height: 400px;
    width: 500px;
    margin-right: auto;
    margin-left: auto;
    background-color: #333;
    left: 312px;
    top: 81px;
}