ダイアログタグ

6705 ワード

HTMLダイアログタグは、新しいポップアップダイアログボックスを作成するのに使用されます.このタグを使用してポップアップメッセージ、警告メッセージ、またはフォームを作成できます.HTML 5の新しい区切り要素です.
通常、ダイアログボックスはユーザービューから非表示になっています.タグをスタイリングするには、css:::backdrop "擬似要素を使用できます.
情報:タグ内のコンテンツを表示/非表示にする必要がある場合は、JavaScript APIを使用する必要があります.
ダイアログ内の要素を結合するには、method =“ダイアログ”属性で指定し、ダイアログタグは“return value”属性で閉じます.
推定読書時間:5分

文法

ダイアログには、開始タグと終了タグの両方が含まれます.これらの2つのタグの間に内容が書き込まれます.


<dialog open> Write your text here.. </dialog>

HTMLタグの特徴

th, td{ padding: 20px; }
HTML HTMLタグ.ダイアログボックスを作成するために使用されます
内容の内容は流れの内容、根を引いている
内容は内容を許容します.
△タグ省略なし.
は、内容を受け入れるどんなHTML要素でも両親を許しました
アインロールアリア
アリアの役割を許可
Count - DOMインターフェース

HTMLタグのサンプル


<!DOCTYPE html> 
<html> 
    <head> 
        <title>HTML <dialog> Dialog Tag</title>       
    </head>
    <body> 
        <h2>Example of HTML <dialog> tag</h2> 
        <dialog open>Welcome to Share Point Anchor</dialog> 
    </body> 
</html>

結果:

結果

サンプルファイルをダウンロード

HTML-Dialog-Tag Download

CSSプロパティを使用してスタイルをHTMLタグ


<!DOCTYPE html> 
<html> 
    <head> 
        <title>HTML <dialog> Dialog Tag</title>       
    </head>
 <style> 
            dialog { 
                color: #C40655;; 
                font-size:30px; 
                font-weight:bold; 
                font-style:italic; 
            } 
            body { 
                text-align:center; 
            } 
        </style>  
    <body> 
        <h2>Example of HTML <dialog> tag with CSS property</h2> 
        <dialog open>Welcome to Share Point Anchor</dialog> 
    </body> 
</html>

結果:

結果

HTMLタグとJavaScript


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <dialog> Dialog Tag</title>
    <style>
      dialog {
            width: 40%;
        color: Green;
        text-align:center; 
                font-size:30px; 
                font-weight:bold; 
                font-style:italic; 
      }
    </style>
  </head>
  <body>
    <div>
      <dialog id="DialogExample">
        <p>
          Welcome to Share Point Anchor
        </p>
        <button id="hide">Close dialog text</button>
      </dialog>
      <button id="show">Clik here to Open</button>
    </div>
    <script type="text/JavaScript">
      (function() { var dialog = document.getElementById('DialogExample'); document.getElementById('show').onclick = function() { dialog.show(); }; document.getElementById('hide').onclick = function() { dialog.close(); }; })();
    </script>
  </body>
</html>