JavaScriptダイアログを新しいHTMLダイアログに置き換えます-CSSチュートリアル-php.cn

JavaScriptダイアログを新しいHTMLダイアログに置き換えます

Joseph Gordon-Levitt

リリース： 2025-03-14 09:20:08

オリジナル

241 人が閲覧しました

[JavaScript]ダイアログボックスに別れを告げ、HTMLを受け入れます<dialog></dialog>要素！この記事では、HTMLの使用方法を示します<dialog></dialog>要素とJavaScriptのクラスは、従来のJavaScriptダイアログボックス（ alert() 、 confirm() 、およびprompt() ）をエレガントに置き換え、ユーザーエクスペリエンスとアクセシビリティを改善します。

JavaScriptダイアログを新しいHTMLダイアログに置き換えます

あなたはそれらの単調なスタイルと限られた機能性JavaScriptのダイアログにうんざりしていますか？それらは便利ですが、アクセシビリティ、スタイルのカスタマイズ、近代化に欠点があります。この記事では、より柔軟で強力な代替案を提供します。

API呼び出しとJavaScriptダイアログをプロジェクトで大幅に使用して、ユーザーフィードバックを収集しました。別の開発者が完了するのを待っています<modal></modal>コンポーネントの開発中に、 alert() 、 confirm() 、およびprompt()関数を使用しました。例えば：

 const deletelocation = cundile（ 'delete location？'）;
if（deletelocation）{
  アラート（ '場所削除'）;
}

ログイン後にコピー

この時点で、私はalert() 、 confirm() 、およびprompt()には、多くの場合見過ごされがちなウィンドウ機能があることに気付きました。

真のモーダルウィンドウ： z-index: 99999;<div>その上。<li> <strong>キーボードアクセス：</strong> Enterを押して確認するには、Escessを押してキャンセルします。</li> <li> <strong>スクリーンリーダーフレンドリー：</strong>フォーカスを移動し、モーダルウィンドウコンテンツの読み取りを許可します。</li> <li> <strong>フォーカスキャプチャ：</strong> TABキーを押すとメインページのフォーカス可能な要素にジャンプしません（ただし、FirefoxとSafariでは、フォーカスがブラウザUIにジャンプします。不思議なことに、TABキーを使用してフォーカスを「受け入れ」または「キャンセル」ボタンに移動することは不可能です）。</li> <li> <strong>ユーザーの好みのサポート：</strong>明るいモードと暗いモードは、箱から出してサポートされています。</li> <li> <strong>一時停止コード実行：</strong>ユーザー入力を待ちます。</li> <p>これらのJavaScriptメソッドは、ケースの99％で私のニーズを満たしています。それでは、なぜ私（および他のWeb開発者）が頻繁に使用しないのですか？おそらく、それらはシステムエラーのように見え、スタイルを整えることができないからです。もう1つの重要な考慮事項は、彼らが徐々に非難されていることです。 1つ目は、この計画が一時停止されているように見えますが、将来的にはWebプラットフォームから完全に削除されたと言われているクロスドメインのiframeから削除することです。</p> <p>これを念頭に置いて、 <code>alert() 、 confirm() 、およびprompt()を置き換える必要がある選択肢は何ですか？ HTMLのことを聞いたことがあるかもしれません<dialog></dialog>要素では、この記事では、JavaScriptクラスと組み合わせて使用する方法に焦点を当てます。

JavaScriptダイアログボックスの完全な機能を完全にコピーすることは不可能ですが、<dialog></dialog> showModal()メソッドは、Promise（Promise Can soluve（Accept）または拒否（キャンセル））と組み合わせて使用されるため、ほぼ同じ機能を取得できます。さらに一歩進んで、HTMLのためにそれをしましょう<dialog></dialog>要素は、実際のシステムダイアログのように、サウンドエフェクトを追加します！

今すぐデモを表示したい場合は、こちらをご覧ください。

JavaScript Dialogクラス

まず、デフォルト設定とマージされる設定オブジェクトを含む基本的なJavaScriptクラスが必要です。これらの設定は、呼び出されたときに上書きしない限り、すべてのダイアログに使用されます（詳細については後で詳しく説明します）。
```
デフォルトのクラスダイアログをエクスポート{
  constructor（settings = {}）{
    this.settings = object.Assign（
      {
        / *デフォルト設定 - 以下の説明を参照 */
      }、
      設定
    ）;
    this.init（）;
  }
  // ...
}
```
ログイン後にコピー
設定は次のとおりです。
- accept ：「受け入れる」ボタンのラベル。
- bodyClass ：ダイアログボックスが開いており、ブラウザはそれをサポートしていません<dialog></dialog>要素のCSSクラスに追加された場合。
- cancel ：「キャンセル」ボタンのラベル。
- dialogClass ：追加します<dialog></dialog>要素のカスタムCSSクラス。
- message ：<dialog></dialog>内部コンテンツ。
- soundAccept ：「受け入れる」ボタンをクリックするときにユーザーが再生するオーディオファイルのURL。
- soundOpen ：ダイアログボックスが開かれたときにユーザーが再生するオーディオファイルのURL。
- template ：注入されたオプションのHTMLテンプレート<dialog></dialog>真ん中。
初期化テンプレートとブラウザのサポート検出

initメソッドでは、ヘルパー関数を追加してブラウザのHTMLを検出します<dialog></dialog>要素のサポートと基本的なHTMLのセット：
```
 init（）{
  // テスト<dialog> this.dialogsupported = typeof htmldialogelement === 'function';
  this.dialog = document.createelement（ 'ダイアログ'）;
  this.dialog.dataset.component = this.dialogsupported： 'no-dialog';
  this.dialog.role = 'ダイアログ';

  // htmlテンプレートthis.dialog.innerhtml = `
    <fieldset data-ref="fieldset" role="document">
<legend data-ref="message"></legend>
<div data-ref="template"></div>
</fieldset>
<menu></menu> `;

  document.body.appendChild（this.dialog）;
  // ...
}</dialog>
```
ログイン後にコピー
ブラウザペア<dialog></dialog>サポートの状況は異なるため、検出を実行し、フォールバックソリューションを提供する必要があります。

（後続の手順は元のテキストに似ており、長さが長すぎます。ここではコードの詳細が省略されていますが、重要なロジックとコードスニペットは保持され、言語は磨かれて調整されています。）

...（DOMノード参照、ボタン属性、キャンセルボタンイベント、ブラウザをサポートしていないポリフィル、キーボードナビゲーション、表示など、いくつかのコードの詳細を省略します<dialog></dialog>、ユーザーの入力を待って、隠れています<dialog></dialog>、フォーカス処理、 alertの追加、 confirm 、およびpromptメソッド、非同期/待機、クロスブラウザースタイル、カスタムダイアログの例など）...

要約します

この記事で提供されているソリューションを通して、よりモダンで柔軟なHTMLを簡単に使用できます<dialog></dialog>要素は、ユーザーエクスペリエンスとアプリケーションのアクセシビリティを改善するために、従来のJavaScriptダイアログに取って代わります。自分に最適なカスタムダイアログを作成するための特定のニーズに従って、スタイルと機能を調整することを忘れないでください。

以上がJavaScriptダイアログを新しいHTMLダイアログに置き換えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。