Question

我有这个功能只是为了从页面顶部设置div并在关闭时为其设置动画。

但如果我关闭它只是以一种奇怪的方式行事它打开时工作正常吗？在某种意义上，页脚是封闭的，然后关闭整个身体。

我有一个关闭按钮和一个要关闭的链接。如果我使用链接它工作正常但是当涉及按钮时，它的行为就像我上面提到的那样。

这是我的插件：

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

这就是我所说的：

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

jsFiddle

上的实时示例

Answer 1

您的关闭和关闭按钮没有相同的父级。关闭动画整个对话框，然后删除对话框。关闭按钮为页脚设置动画，然后删除对话框。这就是为什么它表现得很奇怪。

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

由于您在javascript中引用了div，因此您也可以使用它。我还建议将隐藏函数放在animate的回调中，而不是setTimeout（因此它在动画结束时执行）：

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

Answer 2

问题是由于您首先toggle页脚，然后隐藏对话框：

$('.close,.closebutton').click(function(){
  // This hides `.footer` which is parent of `.closebutton`
  // Commented this out since it's not needed
  // $(this).parent().animate({top:'toggle'},50);
  setTimeout(function() {
    // This hides the dialog
    $('.page').fadeOut().remove();
  },300);     
});

您可以跳过切换$(this).parent().animate({top:'toggle'},50);，因为它已移除.page ...

Answer 3

这是解决方案：

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

问题是你有$(this).parent().animate({top:'toggle'},50);

这个动画功能怎么了？

3 个答案: