jquery - 像fancybox jquery一样制作一个div pop onclick

Question

我需要弹出一个像jquery fancybox这样具有弹性效果的div 我正在使用下面的编码，但它不起作用......

HTML：

<a href="#" id="LoginAnchorLink">ClickME</a>
<div id="dialog" class="Popup" style="display:none;">
    content of the div have to be popup
</div>

CSS：

.Popup {
    position: fixed;
    background-color: #ffffff;
    width: 100px; 
    height:100px;
}

jQuery：

jQuery(document).ready(function () {
    $("#LoginAnchorLink").click(function () {
        $("#dialog").fancybox();
    });
});

我错过了什么还是出了什么问题？

Answer 1

重新阅读后，我决定编辑帖子。这应该更清楚。

不要忘记附上fancybox 的css 和javascript 文件。

您的登录表格

<div style="display: none;">
    <div id="logindiv" style="width:400px;height:100px;overflow: hidden;">
        You div with login data and input fields
    </div>
</div>

登录链接

<a id="loginbutton" href="#logindiv" title="enter your login details here">Login Here</a>

jQuery

<script type="text/javascript">
    $(document).ready(function() {
        $("#loginbutton").fancybox({
            'titleShow'     : true,
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic',
        });
    });
</script>

Answer 2

你的 HTML 应该像 dis 一样改变

<a href="#" id="LoginAnchorLink">ClickME</a>
<div style="display:none;">
<div id="dialog" class="Popup">
    content of the div have to be popup
</div>
</div>

确保jquery库和fancybox js文件的路径