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

Question

请帮我解决这个问题。

我有一个 html 文件，其中包含一个A标签，该标签引用DIV同一 html 页面中的标签。下面给出。

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

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

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

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

我想DIV使用 JQuery 使用覆盖效果淡入这个标签。所以我为 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;to .addServerDetail，不如创建一个内联 div，并将其display:none;作为 div 的包装器.addServerDetail。

JSFiddle：- http://jsfiddle.net/aidioo7/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;
}