animatedmodal.jsの不具合を修正した時の話

53d6cfae0180c5d91ce80257a393369d_s
全画面表示の美しいモーダルが簡単に実装できる「animatedmodal.js」
ただ、これに1つ不具合があったからその修正。

内容

不具合の内容は、「モーダルを閉じてすぐにその閉じたモーダルを開こうとするとバグる」ってもの。
すぐっていうのは1秒以内なんだけど、サイトの構成次第では発生しうる内容だと思う。ってか実際そうなった。

原因

肝心の原因はというと、このanimatedmodalの処理のタイミングだった。
このanimatedmodalの大体87行目とか108行目に、

id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterOpen);
id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose);

というものが書いてあるんだけど、これは要するに、アニメーションが終わった後にafterOpen(afterClose)実行するやでっていうもの。
(afterCloseにはz-indexを-にする記述がある)
んで、アニメーションが終了する前にもう1回開始するとmodal全体はafterOpenの状態に、z-indexだけがafterCloseの状態になることでバグる。

対処法

これの回避法はまあ幾つか考えられるんだけど、一番楽な、
「afterCloseの処理が完了してない状態で開始できないようにする」っていう方法で解決した。

やり方としては、72行目あたりを

modal.click(function(event) {  
	if (id.css('z-index') == settings.zIndexOut || id.css('opacity') == '0') {   
		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);
			};  
		} 
	}
});

こうしてしまえばいい。2行目のif文を加えただけなんだけど。
要するに、z-indexがafterOpenの処理が終わった後の状態もしくはopacityが0の状態どちらかを満たしているのなら実行するっていう風にした。
opacityの記述がないと、一番最初にモーダルが立ち上がらなくなるから注意。
(animatedmodalのmodalは1回目立ち上げの時はopacityを0から1にすることで表示させていて、2回目以降はz-indexを操作して実行している)

もしここで躓いてる人がいたら、参考にしてみてくーださい。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。