パスワード変更画面をモーダルウインドウにしました

あるシステムでパスワードの変更画面を作成することになり、パスワード変更をクリックしたら、モーダルで表示することになりました。

モーダルで表示する内容のソースコードは、元の画面のソースコードとは分離して作成した方が、機能を分けられるので後からのメンテナンスも簡単そうです。

そういった画面は、見たことはあっても自分で作成したことがありませんでした。

jQueryのLightboxプラグインのように、手軽に実現できるプラグインがないか探したところ、Colorboxを見つけました。
Colorbox - a jQuery lightbox

使い方

Colorboxのホームページからダウンローして、解凍します。
解凍して出きたファイルから、

• jquery.colorbox-min.jsファイル
• example1～example5ディレクトリ内のいずれかのcolorbox.cssファイルと、画像ファイル

をアップロードします。
今回はexample3ディレクトリ内のファイルをアップロードしました。

ソースコードのheadには、

<link rel="stylesheet" href="colorbox.css">
<script src="jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
	$(".iframe").colorbox({iframe:true, width:"90%", height:"90%"});
});
</script>

を追加し、bodyには

<p><a class="iframe" href="./password.php">パスワード変更</a></p>

を追加すれば準備完了です。

パスワード変更をクリックすると、モーダルで表示できました。

パスワード変更のためのボタンをクリックすると、postメソッドでsubmitされ、モーダルでの表示だけ次の画面に遷移したので、期待した通りの動作を実現できました。