jQuery自定义的模态框淡入淡出效果
刚刚学习了jQuery，把之前的代码简化一下。
原生JS：https://www.cnblogs.com/shirayuki/p/15091296.html
把关闭封装成了函数：
1 // 模态框淡入淡出 2 $('.addbtn').on('click',function() { 3 $('.mask').show(); 4 $('.mask').css('opacity', 1); 5 $('.add').show(); 6 $('.add').css('opacity', 1); 7 }); 8 $('.revbtn').on('click',function() { 9 $('.mask').show(); 10 $('.mask').css('opacity', 1); 11 $('.rev').show(); 12 $('.rev').css('opacity', 1); 13 }); 14 $('.soldbtn').on('click',function() { 15 $('.mask').show(); 16 $('.mask').css('opacity', 1); 17 $('.sold').show(); 18 $('.sold').css('opacity', 1); 19 }); 20 // 调用关闭 21 $('.close').eq(0).on('click',() => { cls($('.add').get(0)); }); 22 $('.mydefbtn_default').eq(0).on('click',() => { cls($('.add').get(0)); }); 23 $('.close').eq(1).on('click',() => { cls($('.rev').get(0)); }); 24 $('.mydefbtn_default').eq(1).on('click',() => { cls($('.rev').get(0)); }); 25 $('.close').eq(2).on('click',() => { cls($('.sold').get(0)); }); 26 $('.mydefbtn_default').eq(2).on('click',() => { cls($('.sold').get(0)); }); 27 // 关闭函数 28 function cls(modal) { 29 $('.mask').css('animation','fadeout .3s'); 30 modal.style.animation = 'fadeout .3s'; 31 setTimeout(function () { 32 $('.mask').hide(); 33 modal.style.display = 'none'; 34 $('.mask').css('animation','fadein .7s'); 35 modal.style.animation = 'fadein .5s'; 36 }, 300) 37 $('.mask').css('opacity', 0); 38 modal.style.opacity = 0; 39 }
jQuery函数参数传递还没有详细的学习，用for循环绑定事件失败了，将来看看还能不能继续简化。
