ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptキャンセルポップアップボックス

JavaScriptキャンセルポップアップボックス

王林
王林オリジナル
2023-05-12 09:36:361233ブラウズ

JavaScript は、Web デザインと対話に一般的に使用されるフロントエンド プログラミング言語です。 Web ページでは、ポップアップ ボックスは非常に一般的な対話方法であり、ユーザーに何らかの操作の実行や情報の表示を促すことができます。場合によっては、ポップアップ ボックスをキャンセルする必要がある場合がありますが、この記事では JavaScript を使用してポップアップ ボックスをキャンセルする方法を紹介します。

  1. 確認ボックスの使用

JavaScript には、確認ボックスをポップアップ表示してユーザーに確認または確認を求める組み込み関数confirm()があります。操作をキャンセルします。この関数の使用法は次のとおりです。

confirm("确定要取消吗?");

この関数は、ユーザーが [確認] または [キャンセル] をクリックしたかどうかを示すブール値 true または false を返します。

ユーザーが [キャンセル] をクリックしたときに元のポップアップ ボックスをキャンセルしたい場合は、この関数を使用できます。元のポップアップ ボックスが次のように書かれているとします:

alert("这是一个弹框");

今度は、ユーザーがキャンセルをクリックしたときにこのポップアップ ボックスをキャンセルしたいとします。コードは次のとおりです:

if(confirm("确定要取消吗?")) {
  alert("这是一个弹框");
}

The ifここではalert()関数を使用しており、confirm()の戻り値がtrueの場合のみalert()関数が実行され、それ以外の場合は実行されません。

  1. タイマーの使用

JavaScript では、タイマーを使用してポップアップ ボックスをキャンセルできます。ポップアップ ボックスをポップアップ表示したとします。

var myAlert = alert("这是一个弹框");

setTimeout() 関数を使用してタイマーを設定し、タイマーによって実行されるコールバック関数でポップアップ ボックスをキャンセルできます。コードは次のとおりです:

var myAlert = alert("这是一个弹框");
var myTimer = setTimeout(function() {
  myAlert.close();
}, 5000);

この例では、5 秒のタイマーを設定します。タイマーが起動すると、コールバック関数が実行されます。このコールバック関数で close() メソッドが呼び出され、ポップアップ ボックスを閉じます。

ポップアップ ボックスを閉じる方法はブラウザによって異なる場合があることに注意してください。一部のブラウザでは close() メソッドを使用できますが、一部のブラウザではwindow.close() メソッド。

  1. イベント リスナーの使用

JavaScript では、イベント リスナーを使用してポップアップ ボックスをキャンセルできます。すでにポップアップ ボックスが表示されていると仮定します。

var myAlert = alert("这是一个弹框");

クリック イベント リスナーを現在のウィンドウに追加し、コールバック関数でポップアップ ボックスをキャンセルできます。コードは次のとおりです:

var myAlert = alert("这是一个弹框");
window.addEventListener("click", function() {
  myAlert.close();
});

この例では、ウィンドウにクリック イベント リスナーを追加します。ユーザーがどこかをクリックすると、コールバック関数がトリガーされます。このコールバック関数で close() メソッドが呼び出され、ポップアップ ボックスを閉じます。

イベント リスナーを使用する場合は、ポップアップ ボックスがポップアップしたことを確認し、現在のウィンドウにリスナーを追加する必要があることに注意してください。そうしないと、ロジック エラーが発生する可能性があります。

要約すると、JavaScript にはポップアップ ボックスをキャンセルする複数の方法が用意されており、開発者はニーズに応じて適切な方法を選択できます。また、ポップアップボックスをキャンセルする場合は、ブラウザの互換性や論理的な正しさにも注意する必要があります。

以上がJavaScriptキャンセルポップアップボックスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。