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

Question

我需要像 jquery fancybox 那样弹出一个 div具有 flex 效果我正在使用以下编码但它不起作用......

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>