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

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

王林
リリース: 2023-05-12 09:36:36
オリジナル
1326 人が閲覧しました

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート