knockout.js モーダルウィンドウ
2012/06/18
サンプル：
knockout.jsでモーダルウィンドウ
knockout.jsでモーダルウィンドウ
めも
モーダルウィンドウの内容
よく理解していないが…要は、ボタンクリックすると画面がグレーになってその上に別窓が表示されるってのがモーダルウィンドウと呼ばれるヤツらしい。
モーダルウィンドウの実装
やるべきことは下記。
ボタンクリック
↓↓↓
画面をグレーにする
↓↓↓
その上に別窓を表示
↓↓↓
閉じるボタン or 別窓の外側クリックで別窓閉じる
↓↓↓
画面をグレーにする
↓↓↓
その上に別窓を表示
↓↓↓
閉じるボタン or 別窓の外側クリックで別窓閉じる
モーダルウィンドウの実装１：ボタンクリック
ボタンにclickバインディングを指定。
モーダルウィンドウの実装２：画面をグレーにする
ウィンドウの一番上（「z-index:9000;」とか指定）に縦横100%のブロック要素を追加。
※普段は非表示。表示する際はposition指定。
※とりあえずこれを「koModalMask」と名付けておく（後述で使うために）。
※普段は非表示。表示する際はposition指定。
※とりあえずこれを「koModalMask」と名付けておく（後述で使うために）。
モーダルウィンドウの実装３：その上に別窓を表示
さらに上に（「z-index:9999;」とか指定）に好きなサイズのブロック要素を追加。
※普段は非表示。表示する際はposition指定。
※とりあえずこれを「koModalWindow」と名付けておく（後述で使うために）。
※普段は非表示。表示する際はposition指定。
※とりあえずこれを「koModalWindow」と名付けておく（後述で使うために）。
モーダルウィンドウの実装４：閉じるボタン or 別窓の外側クリックで別窓閉じる
「閉じるボタン」を押したらってのは単純にclickバインディングで対応。
「別窓の外側クリック」を押したらってのは「koModalMask」にclickバインディングを指定して対応。
「別窓の外側クリック」を押したらってのは「koModalMask」にclickバインディングを指定して対応。
サンプルソースについて
サンプル：
knockout.jsでモーダルウィンドウ
knockout.jsでモーダルウィンドウ
最終的には余計な記述を排除して、カスタムバインディングだけで良い感じにしたい。
まずは「koModalMask」「koModalWindow」をカスタムバインディングにしている内容は真偽値で表示・非表示の設定。
背景色をそのときの気分で変更できるようにサブプロパティ（？）を指定。
「koModalMask」用のブロック要素はbodyタグ直下に置いておくの無難。