前書き
モーダルウィンドウを利用することは、WEBアプリケーション開発におけてとても不可欠です。
メッセージ表示などの利用方法は一般的ですが、編集ポップアップとしての利用方法もあります。
その場合は、いろいろな注意点と対策が必要となります。
基本知識
モーダルウィンドウとは
コンピュータアプリケーションソフトウェアのユーザインタフェース設計において、何らかのウィンドウの子ウィンドウとして
生成されるサブ要素のうち、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないもの。
※WIKI
モーダルウィンドウ実現方法
html5
ウィンドを実現するために、HTML下記のタグと処理を定義している。
タグ：
<dialog></dialog>
モードレスウィンド表示：
dialog.show()
モーダルウィンド表示：
dialog.showModal()
ウィンドウを開くと、html上は<dialog>⇒<dialog open>に変更します。
下記の記事を読んでいただくと、モーダルの基本をもっと深く理解できると思います。
モーダルウィンドウの基本
jQuery
jQuery自体はモーダルウィンドウ機能を提供していない。
jQueryを利用する場合は、下記のいずれか方法でモーダルウィンドウを実現できます。
- jQuery UI Dialog
- jQuery Modal jquerymodal
- プラグインなしで、DIV＋CSSを利用して、z-indexを設定することで実現
- 他に流行っているjavaScriptフレームワークは大体似ている方法で実現
一般的な利用場面（利用者に情報をお知らせ）
- 画面ローディング
- メッセージなどの表示（確認、エラー、警告、INFO）
編集ポップアップとする利用場面
注意点と対策
セッションタイムアウト発生時
注意点
セッションタイムアウト発生時、編集ポップアップ上にセッションタイム発生のみで親画面画面と連動しない。
対策
編集ポップアップセッションタイムアウト発生⇒ポップアップ閉じる⇒ログインなどの画面に遷移
のような処理を組み込むことが必要です。
システム例外発生時
注意点
システム例外発生時、親画面に反映しないと親画面の業務処理が続けてしまう可能性ある。
対策
セッションタイムアウト発生時と同じように、システム例外画面に遷移する処理が必要です。
ウィンドウ上の同期処理
注意点
モーダルポップアップ上に基本的に同期処理ができない。
【理由】モーダルポップアップ同期終了後、親画面を含めすべてリフレッシュされるため、
モーダルポップアップ同期処理後の後続処理ができなくなる。
対策
対策1> 同期処理を非同期処理にする。
対策2> 同期処理⇒画面リフレッシュ⇒ポップアップを再度表示
対策3> 同期処理⇒現在ポップアップを閉じる⇒新しいポップアップを表示(例：intra-mart imuiDialog)
親画面とIDやNAMEは重複する可能性
注意点
HTML上にはID、NAME（チェックボックス、ラジオボタン以外）を重複したら処理が混乱してしまう可能性ある。
対策
・ ポップアップのほうにIDやNAMEの前にプリフィックスなどをつけて親画面と区別するように工夫する。
・ ポップアップからさらにポップアップを出したい場合、javaScript側にスタックなどの仕組みが必要となる。
分からないことがあったら
この文章の内容について不明な点があれば お気軽にコメントしてください。