Question

I have this function just to animate the div from the top of the page and vieversa when it is closed.

But it works fine when it is opened if I closed it just behaves in an odd way?
Odd way in the sense the footer is closed and then it closes the entire body.

I have a close button and a link to close.
If I use the link it work fine but when it comes to button then it behaves like I mentioned above.

This is my plugin:

    (function($){

    // Defining our jQuery plugin

    $.fn.Lighty = function(prop){

        // Default parameters

        var options = $.extend({
            height : "250",
            width : "500",
            title:"JQuery Modal Box Demo",
            description: "Example of how to create a modal box.",
            top: "20%",
            left: "35%",
        },prop);

        return this.click(function(e){
            add_block_page();
            add_popup_box();
            add_styles();
           setTimeout(function() {
          $('.Lighty').animate({top:'toggle'},50);
            },300);
        });

         function add_styles(){
            $('.Lighty').css({
                'position':'absolute',
                'left':options.left,
                'top':options.top,
                'display':'none',
                'max-height': options.height + 'px',
                'width': options.width + 'px',
                'border-bottom':'1px solid #EEE',
                'box-shadow': '0px 2px 7px #292929',
                '-moz-box-shadow': '0px 2px 7px #292929',
                '-webkit-box-shadow': '0px 2px 7px #292929',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px',
                'background': '#ffffff',
                'z-index':'50',
            });
            $('.close').css({
                'position':'relative',
                'top':'15px',
                'left':'20px',
                'float':'right',
                'display':'block',
                'height':'50px',
                'width':'50px',
                'background': 'url(images/action_delete.png) no-repeat',
            });
        }

         function add_block_page(){
            var block_page = $('<div class="page"></div>');
            $(block_page).appendTo('body');
        }

         function add_popup_box(){
             var pop_up = $('<div class="Lighty"><a href="#" class="close"></a><div class="mainbody"><h2>' + options.title + '</h2><p>' + options.description + '</p></div><div class="footer"><button class="closebutton">close</button></div></div>');
             $(pop_up).appendTo('.page');

            $('.close,.closebutton').click(function(){
                 $(this).parent().animate({top:'toggle'},50);
                 setTimeout(function() {        
                  $('.page').fadeOut().remove();    
                },300);      
             });

        }

        return this;
     };
})(jQuery);

This is how I call it:

<script type="text/javascript">
        $(document).ready(function () {
            $('.Modalbox').Lighty({
                title: 'Simple Dialog',
                description: 'This is a simple modal dialog with title.<br>Write your descrition here.<br>Write Some content here.<br>Write more content here.<br>Write much more content here.'
            });
        });
    </script>

Live sample on jsFiddle

Answer 1

Your close and closebutton don’t have the same parent. The close animates the whole dialog, then removes the dialog. The closebutton animates the footer, then removes the dialog. That’s why it’s behaving oddly.

$('.close,.closebutton').click(function(){
    $(this).parent().animate({top:'toggle'},50); // This should be parent().parent() for .closebutton
    setTimeout(function() {        
        $('.page').fadeOut().remove();    
    },300);      
});

Since you have a reference to the div in your javascript, you could also use it instead. I’d also suggest putting the hiding function in animate’s callback, instead of setTimeout (so it’s executed when the animation ends):

pop_up.animate({top:'toggle'},50,function() {
    $('.page').fadeOut().remove();    
});