jQuery 2-modal Conflict：需要“删除” animationModal，但要延迟，以隐藏第二模式的滚动条

问题描述

我在页面上有2种不同类型的模态。一个是在页面加载时触发的“ animatedModal”，另一个是触发按钮的onclick的标准模式。

对于第二个，由于它会弹出视频，因此我必须添加一个隐藏双滚动条：

$(document).ready(function(){
$('.pop-open').click(function() {a
        $('body').css({
        'overflow': 'hidden',});
    });
$('.lightbox').click(function() {
        $('body').css({
        'overflow': 'visible',});
    });
});

但是，第一个（animatedModal）脚本冲突。隐藏双滚动条仅在添加时才起作用，以删除第一个模态（在关闭后）：

$(document).ready(function(){
$(".survey-close").on("click",function(e) {
     $("#animatedModal").remove();
 });
});

它可以工作，但是问题是我丢失了animationModal的动画效果，因为它突然关闭了。因此，我尝试在删除脚本上添加一个延迟。没用。

所以我的问题是：

a）如何向上述删除脚本添加延迟？
b）或者，如何在删除关闭时将其放入animationModal脚本中？

这里是animationModal脚本，以防选择b更容易：

(function ($) {
 
    $.fn.animatedModal = function(options) {
        var modal = $(this);
        
        //Defaults
        var settings = $.extend({
            modalTarget:'animatedModal',position:'fixed',width:'100%',height:'100%',top:'0px',left:'0px',zIndexIn: '9999',zIndexOut: '-9999',color: 'rgba(250,250,0.5)',opacityIn:'1',opacityOut:'0',animatedIn:'lightSpeedIn',animatedOut:'bounceOut',animationDuration:'.6s',//overflow:'auto',// Callbacks
            beforeOpen: function() {},afterOpen: function() {},beforeClose: function() {},afterClose: function() {}
 
            

        },options);
        
        var closeBt = $('.close-'+settings.modalTarget);

        //console.log(closeBt)

        var href = $(modal).attr('href'),id = $('body').find('#'+settings.modalTarget),idConc = '#'+id.attr('id');
            //console.log(idConc);
            // Default Classes
            id.addClass('animated');
            id.addClass(settings.modalTarget+'-off');

        //Init styles
        var initStyles = {
            'position':settings.position,'width':settings.width,'height':settings.height,'top':settings.top,'left':settings.left,'background-color':settings.color,//'overflow-y':settings.overflow,'z-index':settings.zIndexOut,'opacity':settings.opacityOut,'-webkit-animation-duration':settings.animationDuration
        };
        //Apply stles
        id.css(initStyles);

        modal.click(function(event) {       
            event.preventDefault();
            $('body,html').css({'overflow':'hidden'});
            if (href == idConc) {
                if (id.hasClass(settings.modalTarget+'-off')) {
                    id.removeClass(settings.animatedOut);
                    id.removeClass(settings.modalTarget+'-off');
                    id.addClass(settings.modalTarget+'-on');
                } 

                 if (id.hasClass(settings.modalTarget+'-on')) {
                    settings.beforeOpen();
                    id.css({'opacity':settings.opacityIn,'z-index':settings.zIndexIn});
                    id.addClass(settings.animatedIn);  
                    id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',afterOpen);
                };  
            } 
        });



        closeBt.click(function(event) {
            event.preventDefault();
            $('body,html').css({'overflow':'auto'});

            settings.beforeClose(); //beforeClose
            if (id.hasClass(settings.modalTarget+'-on')) {
                id.removeClass(settings.modalTarget+'-on');
                id.addClass(settings.modalTarget+'-off');
            } 

            if (id.hasClass(settings.modalTarget+'-off')) {
                id.removeClass(settings.animatedIn);
                id.addClass(settings.animatedOut);
                id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',afterClose);
            };

        });

        function afterClose () {       
            id.css({'z-index':settings.zIndexOut});
            settings.afterClose(); //afterClose
        }

        function afterOpen () {       
            settings.afterOpen(); //afterOpen
        }

    }; // End animatedModal.js

}(jQuery));

解决方法

对于延迟，请使用setTimeout函数。注意：只需隐藏模式。

def formfield_for_manytomany(self,db_field,request,**kwargs):
        form_field = super().formfield_for_manytomany(db_field,**kwargs)
        if db_field.name in [*self.filter_horizontal]:
            form_field.widget.attrs={'size': '10'}
        return form_field

使用bootstrap modal个事件，

setTimeout(function(){ $("#animatedModal").hide(); },5000);//5 secs delay
setTimeout(function(){ $("#animatedModal").modal("hide"); },5000);//using bootstrap modal

,

不幸的是，此脚本无法创建超时：

$(document).ready(function(){
$(".survey-close").on("click",function(e) {
     $("#animatedModal").remove();
 });
});

按下指定的按钮确实可以杀死模态，但是问题是我丢失了被杀死的模态的动画效果。因此，除非我可以成功添加超时，否则无法使用它。

所以我最终使用的解决方法是在animationModal脚本本身中简单地更改它：

closeBt.click(function(event) {
            event.preventDefault();
            $('body,html').css({'overflow':'auto'});

收件人：

closeBt.click(function(event) {
            event.preventDefault();
            $('body,html').css({'overflow':''});  //removed auto

这使我的第二个模式的隐藏双滚动条脚本最终起作用，并消除了冲突。在关闭后更改animationModal脚本中的溢出，将我带到了我的核心目标：使隐藏双滚动（从我的OP）开始工作。

我敢肯定，这一切听起来都是令人费解的，但也许有人使用animationModal和另一个对双滚动条狂热的弹出式窗口，将会发现这一天有用。