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标签与overlay effet淡化。所以我使用fancyBox作为Jquery。

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，而是创建一个内联div，display:none;作为.addServerDetail 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;
}