カスタムダイアログボックスの興奮

もちろん、カスタム ダイアログ ボックスが必要です。楽しいですか?

興味のある方のためにこのビデオを見て、プロセスをかなり簡単に処理することができました。

どのように行われたか

まず、HTML 内に構造を作成します。
オーバーレイを使用すると、背景がポップアップしたときに背景をブロックできます。さらに多くの要素を含むボックスを作成する必要もあります。その方法は次のとおりです:

onclick イベントで追加されたボタンにも注目してください。

---

楽しい部分

CSS でスタイルを追加して、新しいボックスをカスタマイズします:

自分独自のダイアログ ボックスを作成するのは非常に刺激的でした。私はボタン、色、形をいじるのが大好きです。時間をかけて理解できてとても嬉しいです。楽しいミニ企画です！

---

機能のセットアップ

1. JavaScript でクリック時にダイアログ ボックスを表示するカスタム関数を作成します。
2. サイズを定義する変数を作成し、ID を使用して DOM から要素にアクセスします。
3. ボックス要素を取得したら、ウィンドウの幅を 2 ​​で割った値を基準として使用して、ポップアップするダイアログ ボックスを中央に配置できます。

このダイアログ ボックスには 3 つの領域がありますが、必要に応じて追加または削除できます。ここでの本当のハードルは機能です。

• それぞれの一意の ID で .innerHTML を使用して、ボックスに情報を動的に追加します。
• this.render はクリック時に情報をレンダリングします。
• alert.render はクリック時に呼び出され、customAlert 関数がトリガーされます。

this.ok 関数は、「ポップアップ」ボックスのボタンがクリックされたときにオーバーレイとダイアログ ボックスが確実に削除されるようにします。それは間違いなく必要です。これを行うには、両方のスタイルを none に設定します。

---

素晴らしい - 試してみてください

これをするのが本当に楽しかったので、また夜遅くまで起きていました。 XD

以上がカスタムダイアログボックスの興奮の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。