モーダルフォーム
重要性: 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 を持たせたくないからです。