HTML5 ネイティブ ダイアログ要素を使用してモーダル コンポーネントを簡単に作成

HTML 5.2 ドラフトでは、新しいダイアログ要素が追加されています。しかし、それは実験的な技術です。

以前は、何らかのモーダル ダイアログやダイアログ ボックスを構築したい場合、背景、閉じるボタン、ダイアログ ボックス内のイベントのバインド、マークアップの配置、メッセージを渡す方法を見つける必要がありました。話すのは...本当に複雑です。ダイアログ要素は上記の問題をすべて解決します。

以下は、ブートストラップ モーダル ボックスの HTML 構造です。

 <!-- ボタンでモーダル ボックスをトリガーします--><button class=btn btn-primary btn-lg data-toggle=modal data-target=#myModal> モーダル ボックスのデモを開始します</button><!-- モーダル ボックス (モーダル) --><div class=modal fade id=myModal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true> <div class=modal-dialog> <div class=modal-content> <div class=modal-header> <button type=button class=close data-dismiss=modal aria-hidden=true> </button> <h4 class; =modal-title id=myModalLabel> モーダル タイトル</h4> </div> <div class=modal-body> ここにテキストを追加します</div> <div class=modal-footer> <button type=button class=btn btn-default data-dismiss=modal>閉じる</button> <button type=button class=btn btn-primary> 変更を送信</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div>

以下は、ネイティブ モーダル ボックスの HTML 構造です。

 <!-- ボタンでモーダル ボックスをトリガーします--><button type=button class=btn>モーダル ボックスを表示</button><!-- モーダル ボックス--><ダイアログ オープン> HTML5 ネイティブ モーダル ボックス</ ダイアログ>

ダイアログ要素の最も単純なマークアップを見てきましたが、上のダイアログでは open が属性であることに気づいたかもしれません。この属性を要素に追加するとダイアログが強制的に表示されます。追加しない場合は削除されます。ダイアログもページ上に絶対配置されます。

上の図は、基本的なモーダル ボックス スタイルを示しています。

ブラウザを開くと、基本的なスタイルが次のようになっていることがわかります。

ダイアログ { 表示: 絶対; 左: 0px; 幅: -webkit-fit-content; マージン: 自動;ボーダースタイル: ソリッド; ボーダーイメージ: 初期; 背景: 白;

ダイアログ要素には、新しい疑似クラス selector::backdrop も導入されています。ブラウザで表示されるデフォルトの ::backdrop スタイルは次のとおりです。

ダイアログ:: 背景 { 位置: 固定; 右: 0px; 左: 0px; }

他の HTML 要素と同様にダイアログ要素のスタイルを設定でき、ほぼすべての CSS スタイルで対応できます。 ::backdrop 疑似クラス セレクターを介して、背景のスタイルを設定するために使用できます。

例えば：

ダイアログ{ マージン-トップ: 200 ピクセル; 高さ: 250 ピクセル; 境界線: 4 ピクセル; ボックス-シャドウ: 0 0 15 ピクセル; } :backdrop { 背景: rgba(黒, .5);}

上記のスタイル効果は次のとおりです。

以下は、open 属性が設定されていないため、視覚的には何も表示されない基本的なダイアログ ボックスです。表示/非表示を切り替えるには JavaScript API を使用する必要があります。

 <dialog>これはダイアログ ボックスです。 </ダイアログ>

Dialog 要素の .show() および .close() API は、それぞれダイアログ ボックスを表示および閉じるための API であり、DOM 要素に対してこれら 2 つの API を使用することで、ダイアログ ボックスを表示および閉じることができます。

例えば：

 <!-- HTML --><ダイアログ> <p>これはダイアログ ボックスです。 </p> <button id=close>ダイアログ ボックスを閉じる</button></dialog><button id=show>ダイアログ ボックスを表示</button> <!-- script --> <script> var ダイアログ = ドキュメント。 querySelector(ダイアログ); document.querySelector(#show).onclick = function(){dialog.show() }; };</script>

パラメータをdialog.close()に渡すことができます。ダイアログ要素の close イベントをリッスンすることにより、dialog.returnValue プロパティは指定された値を返します。

のように：

 <!--HTML--><ダイアログ> <p>これはダイアログ ボックスです。 </p> <p><input type=text id=return_value value= placeholder=内容を入力してください/></p> <button id=close>ダイアログボックスを閉じる</button></dialog><button id=show >ダイアログ ボックスを表示</button><!--script--><script> var ダイアログ = document.querySelector(dialog); document.querySelector(#show).onclick = function(){ Dialog.showModal(); }; document.querySelector(#close).onclick = function(){ var val = document.close(val);要素を閉じるイベントdialog.addEventListener(close, function(){alert(this.returnValue); });</script>

ダイアログ ボックスを表示するためのもう 1 つの API は .showModal() です。

ユーザーがダイアログ ボックス以外のページ要素オブジェクトを操作したくない場合は、.show() を使用する代わりに .showModal() を使用してダイアログ ボックスを開きます。 .showModal() で開かれたダイアログ ボックスには、フルウィンドウの半透明の背景レイヤーがあり、ユーザーがダイアログ ボックスの外のページ要素オブジェクトを操作できないようにします。同時に、ダイアログ ボックスはウィンドウの中央に表示されます。デフォルトでは (上、下、左、右を中央揃え) ); .show() で開かれたダイアログ ボックスはデフォルトでウィンドウの上部に表示されます (中央揃えの表示は CSS を使用して実現できます)。

ダイアログ ボックスを閉じた後、閉じるとイベントがトリガーされます。さらに、ユーザーは Esc キーを入力してモーダル ダイアログ ボックスを閉じることができます。これにより、event.preventDefault() を使用してキャンセルできる cancel イベントが起動されます。

form[method=dialog] を使用すると、フォームを <dialog> 要素と統合できます。フォームが送信されると、ダイアログが閉じられ、dialog.returnValue が使用された送信ボタンの値に設定されます。

さらに、autofocus プロパティを使用すると、ダイアログ ボックスがポップアップ表示されたときに、ダイアログ ボックス内のフォーム コントロールに自動的にフォーカスすることができます。

例えば：

 <!--HTML--><dialog id =dialog> <form method =dialog> <p>利用規約に同意しますか? </p> <p><textarea class =form-controldisabled>規約と要件...</textarea></p> <button type =submit value =Yes>はい</button> <button type =submit value = オートフォーカスなし>いいえ</button> </form></dialog><button id=show>フォームダイアログを表示</button><!--script--><script> varダイアログ = document.querySelector(dialog) ; document.querySelector(#show).onclick = function(){ Dialog.showModal() }; //ダイアログ要素の close イベントをリッスンします。dialog.addEventListener(close, function(e){ if(this.returnValue =) == はい ){ アラート(this.returnValue) //何かをします... }else{ アラート(this.returnValue) //何かをします... });</script>

デスクトップ ブラウザーの中で、ダイアログの全機能をサポートしているのは Google Chrome だけです (このブログ記事の時点では)。ブラウザー間の互換性を実現するには、dialog-polyfill を使用してください。

<iframe src=//caniuse.com/dialog/embedscrolling=noallowtransparency=trueallowfullscreen=trueframeborder=0></iframe>

参考記事：ダイアログ要素のデモ

alwaysjs 関数ライブラリ: https://github.com/JofunLiang/usuallyjs

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。