简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

HTML5ダイアログとは何ですか? HTML5 でダイアログを使用してポップアップ ウィンドウをシミュレートするにはどうすればよいですか?

寻∝梦
リリース： 2018-08-15 17:41:23
オリジナル
4681 人が閲覧しました

HTML5ダイアログとは何ですか? HTML5 でダイアログを使用してポップアップ ウィンドウをシミュレートするにはどうすればよいですか?この記事では主に、HTML5 のダイアログ タグの定義と具体的な使用法、および HTML5 のダイアログ タグを使用してポップアップ ウィンドウをシミュレートする方法について説明します。

HTML5 ダイアログ タグの定義と使用法:

タグは、会話などのダイアログを定義します。

例は次のとおりです: 

<dialog>
  <dt>老师</dt>
  <dd>1+1 等于？</dd>
  <dt>学生</dt>
  <dd>2</dd>
  <dt>老师</dt>
  <dd>答对了！</dd>
</dialog>
ログイン後にコピー

ヒントとメモ:

ヒント: 会話内のすべての文は、

タグで定義されたセクションに含まれる必要があります。以下の例を参照してください。

タグの定義と使用方法:

タグは、ダイアログ ボックス、確認ボックス、またはウィンドウを定義します。

これは例です: 

<table border="1">
<tr>
  <th>January <dialog open>This is an open dialog window</dialog></th>
  <th>February</th>
  <th>March</th>
</tr>
<tr>
  <td>31</td>
  <td>28</td>
  <td>31</td>
</tr>
</table>
ログイン後にコピー

HTML5 ダイアログ タグの属性:

open: open は、ダイアログ要素が有効であり、ユーザーが対話できることを指定します。

最近、ウェブ上の多くのプロセスは、完了する前にユーザーの完全な同意を必要とします。たとえば、ユーザーはアカウントを削除したり、ユーザー名を変更したり、金銭取引を確認したりする必要がある場合があります。

この場合、一般的なユーザー エクスペリエンス (UX、ユーザー エクスペリエンス デザイン) は、2 つのボタンのあるダイアログ ボックスを表示することです。 1 つはキャンセルすること、もう 1 つは続行することです。長年にわたり、この効果を実現するために JavaScript ライブラリに依存してきましたが、この記事では、

要素を使用してこの効果を実現します。

ダイアログ要素を使用します:

は HTML5 (正確には 5.1) 要素です。これは、、
、
要素と同様に「スライス ルート」として分類され、それぞれが body の子として扱うことができる新しい独立したコンテンツ領域を作成します。
や
などのネストされた要素 - 以下に示すように、どちらも有効です。 

<body>
      <div> 
            <dialog></dialog>
      </div> 
      <section> 
            <dialog></dialog> 
      </section>
            <dialog></dialog>
</body>
ログイン後にコピー

デフォルトでは、サポートされているブラウザー (Chrome 37 以降および Opera 27 以降) は、JavaScript の show() メソッドまたは showModal() メソッドを呼び出すことによってのみ表示されます。 () メソッドで再度非表示にします。通常、次のように、クリック イベントでこのメソッドを実行します。 

var $accountDelete = $(&#39;#delete-account&#39;), 
      $accountDeleteDialog = $(&#39;#confirm-delete&#39;); 
  $accountDelete.on(&#39;click&#39;, function() { 
      $accountDeleteDialog[0].showModal(); 
  }); 
  $(&#39;#cancel&#39;).on(&#39;click&#39;, function() {
      $accountDeleteDialog[0].close(); 
  });
ログイン後にコピー

カスタム スタイル:

他のほとんどの要素と同様、ダイアログ ボックスはブラウザのデフォルト スタイルを簡単にオーバーライドできます。したがって、そのスタイルをカスタマイズできます。たとえば、ダイアログ ボックスの境界線を細くしたり、角を丸くしたり、影の効果を追加したりすることができます。

さらに、

要素が (ShowModal() メソッドを使用して) モーダルに表示される場合、追加の疑似要素::backdrop を追加します。 ::backdrop 要素はダイアログ ボックスのすぐ下にあり、ビューポート全体とその下の他の要素をカバーします。

ブラウザのサポート:

現在、Chrome と Safari 6 のみが

タグをサポートしています。

【関連おすすめ】

HTML IMGタグの属性とは何ですか? IMGタグの使い方を理解しよう

HTML5におけるWebとは？ Webストレージの要素は何ですか?

以上がHTML5ダイアログとは何ですか? HTML5 でダイアログを使用してポップアップ ウィンドウをシミュレートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
HTML5 dialog的用法 HTML5 dialog实现模拟弹窗
ソース：php.cn
前の記事：HTML5でsideタグを使用するにはどうすればよいですか? HTML5aside サイドバーの使い方をご存知ですか? 次の記事：HTML5のヘッダータグとは何を意味するのでしょうか？ HTML5のheaderタグの使い方をご存知ですか？
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
グリッドを使用してこの特定のデザインを作成する: ステップバイステップ ガイド この画像に似たレイアウトを作成しようとしています。このグリッドを使用してみましたが、実現できません。 <ulclass="container">&l...
から 2024-04-06 20:29:08
0
2
492
3 レベル階層のカスタム分類を使用して woocommerce 関連製品を選択します 「スポーツ」というカスタム分類を持つ woocommerce ストアがあります。分類には、親、子、子という 3 つのレベルがあります。たとえば、屋内スポーツ > アリーナ ス...
から 2024-04-06 20:05:30
0
1
544
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか? Webアプリケーションを開発しています。 Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか?私はセマンティック バージョニングを使用しており、...
から 2024-04-06 19:13:16
0
2
476
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！