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文件的路径

像fancybox jquery一样创建一个div pop

2 个答案: