colorboxを閉じた時に親ウィンドウをリロードする(reload on closed)

colorboxでモーダルウィンドウを閉じた時に親ウィンドウをリロードさせたかったので共通して使うためのコードを書きました。

基本的な考え方としては、リロードさせるかどうかのフラグとリロードさせる関数を持っておいて閉じるイベントが発生した際に２つの値を見てリロード処理を行います。
このフラグと関数はどこからでも設定できます。デフォルトではフラグはfalse、リロード関数はlocation.reload()です。

jsファイル

下記のjavascriptファイルを作成しjquery.colorbox.js（もしくはjquery.colorbox-min.js）の直後に読み込みます。

jquery.colorbox.reloadOnClosed.js

if (jQuery && jQuery.colorbox) {
  jQuery.colorbox.reloadOnClosedSettings = {
		reloadFunc: function() {location.reload(true);},
		needReloadParent: false
	};
	jQuery.colorbox.reloadOnClosed = function(options) {
		var reloadOnClosedSettings = jQuery.colorbox.reloadOnClosedSettings;
		if (options === undefined) {
			reloadOnClosedSettings.needReloadParent = true;
			return;
		};
		if (options.needReloadParent === true || options.needReloadParent === false) {
			reloadOnClosedSettings.needReloadParent = options.needReloadParent;
		}
		if (options.reloadFunc && (typeof options.reloadFunc === "function")) {
			reloadOnClosedSettings.reloadFunc = options.reloadFunc;
		} else if (options.reloadFunc === null) {
			reloadOnClosedSettings.reloadFunc = null;
		}
	};
	jQuery(document).on('cbox_open', function(){
		jQuery.colorbox.reloadOnClosedSettings.needReloadParent = false;
	});
	jQuery(document).on('cbox_closed', function(){
		var reloadOnClosedSettings = jQuery.colorbox.reloadOnClosedSettings;
		if (reloadOnClosedSettings.needReloadParent === true && reloadOnClosedSettings.reloadFunc && (typeof reloadOnClosedSettings.reloadFunc === "function")) {
			reloadOnClosedSettings.reloadFunc();
		}
	});
}

github上にも上げました。
http://github.com/kamegu/jquery.colorbox.reloadOnClosed

使い方

colorbox()を呼ぶところは何も変える必要がありません。
モーダルウィンドウが開いた後に、下記のメソッドを呼ぶことによってモーダルを閉じると同時にリロードできます。このメソッドはリロードフラグをオンにするメソッドです。

jQuery.colorbox.reloadOnClosed();

通常は、jQuery.closebox.close()の直前に呼ぶことが多いと思いますが、必ずしもセットで呼ぶ必要はないです。
たとえば、iframeで登録後引き続きモーダル上で処理を行いたい場合に、登録した時点でフラグをオンにしておけば、モーダルのクローズボタンやOverlayをクリックして閉じる場合にもリロード処理は実行されます。

また、デフォルトではリロード処理はlocation.reload(true)ですが、これも変えることが出来ます。Ajaxで一部のみ更新するといった処理も可能です。

jQuery.colorbox.reloadOnClosed({
  reloadOnClosed: function(){
    // ここにリロード処理を書く
  };
});

デモ画面です。
http://kamegu.github.io/demo/colorbox/reload-on-close.html