モーダルフォーム
重要性: 5
メッセージ html 入力フィールドとボタン OK/CANCEL を持つフォームを表示する関数 showPrompt(html, callback) を作成してください。
- ユーザテキストフィールドに何か入力し、Enter または OK ボタンをクリックする必要があります。その後、入力された値を一緒に
callback(value)が呼ばれます。 - そうではなく、ユーザが Esc や CANCEL を押した場合、
callback(null)が呼ばれます。
どちらの場合も、入力プロセスが終了したらフォームが削除されます。
要件:
- フォームはウィンドウの中央です。
- フォームは モーダル です。つまり、ユーザがそれを閉じるまではページの残り部分 とのやりとりはできません。
- フォームが表示されたとき、ユーザのためにフォーカスは
<input>の中であるべきです。 - キー Tab/Shift+Tab はフォームフィールド間でフォーカス移動し、他のページの要素へ移らないようにします。
使用例:
showPrompt("Enter something<br>...smart :)", function(value) {
alert(value);
});iframe でのデモ:
P.S. ソースドキュメントは固定された位置付けのフォーム用のHTML / CSSがありますが、それをモーダルにするのはあなた次第です。
モーダルウィンドウは、次のようにウィンドウ全体をカバーする半透明の <div id="cover-div"> を使って実装できます。:
#cover-div {
position: fixed;
top: 0;
left: 0;
z-index: 9000;
width: 100%;
height: 100%;
background-color: gray;
opacity: 0.3;
}<div> がすべてをカバーするので、すべてのクリックを取得します。
また、body.style.overflowY='hidden' の設定により、ページスクロールを防ぐこともできます。
フォームは <div> の中ではなく、その隣です。なぜならそれには opacity をもたせたくはないからです。