JavaScriptポップアップ

• 四月 18, 2024

JavaScriptはWebページにインタラクティブ機能を追加するように設計されているため、ポップアップボックスを使用して情報を収集したりユーザーに表示したりするのを簡単にするいくつかの機能があることは驚くことではありません。これらのボックスを見る前に、これらは情報を収集して表示する最も簡単な方法であることが多いですが、必ずしも最も魅力的またはユーザーフレンドリーではないことに注意してください。特に、ポップアップではユーザーがボタンを押してウィンドウを閉じる必要があります。これは、すべてのメッセージまたは入力の後に終了します。これはすぐに古くなります。また、Webデザインの観点からは、ポップアップボックスでの情報の表示を実際に制御することはほとんどできません。とはいえ、適切な場所にあり、適度に使用されるポップアップボックスは、シンプルで効果的なものです。

ポップアップボックスには、アラート、確認、プロンプトの3種類があります。最も単純で最も一般的に使用されるポップアップはアラートです。アラートは、ユーザーへのメッセージという1つの引数を取ります。警告ボックスが表示された場合、ユーザーは「OK」ボタンを押すまで続行できません。警告ボックスのコードは簡単です：

alert（ "これはアラートです"）



確認ボックスは少しだけ複雑です。アラートと同様に、confirmはメッセージという1つの引数を取ります。確認ボックスが表示されたら、ユーザーには「OK」または「キャンセル」ボタンを使用して回答の選択肢が与えられます。アラートとは異なり、確認には戻り値があります。0はユーザーが「キャンセル」を押し、1は「OK」を意味します。確認ボックスのコードは、何らかの方法で戻り値を収集することを除いて、アラートボックスと同じです。

save_me = confirm（ "これは確認ポップアップです"）



これは最も複雑なポップアップですが、プロンプトは依然として非常に簡単です。プロンプトは2つの引数を取ります-ユーザーへのメッセージとデフォルト値（デフォルト値が必要ない場合は ""）。プロンプトボックスが表示されたら、ユーザーは要求された情報を入力して[OK]を押します。 「キャンセル」ボタンもあります。戻り値はユーザーの応答です。ユーザーがキャンセルした場合、戻り値は ヌル。プロンプトボックスを空のままにすると、戻り値は空の​​文字列（ ""）になります。これらの値を確認し、使用するよりも何か特別なことをしたいでしょう ヌル または、応答として空の文字列。プロンプトボックスのコードは次のとおりです。

response = prompt（ "これはプロンプトです"、 "ここに応答する"）



ここで、これらのポップアップボックスのデモを見ることができます

---

動画の説明: Build a Popup With JavaScript (四月 2024).