Question

i need to popup a div like the jquery fancybox with elastic effect i am using the below coding but it not works…

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();
    });
});

Am I missing something or has something gone wrong?

Answer 1

After re-reading it, I decided to edit the post.
This should be more clear.

Don’t forget to attach the css and the javascript files for fancybox.

Your login form

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

Login link

<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>