ネイティブHTML5ダイアログウィンドウの作成

公開: 2017-03-29

ダイアログウィンドウは、Webサイトのユーザーインターフェイスデザインで最も一般的に使用される要素の1つです。 これは、通知の表示、サブスクリプションフォームの携帯、エラー/警告の警告、重要な情報への訪問者の注意の喚起など、さまざまな目的で使用されます。 ダイアログウィンドウが効果的に設計され、正しく使用されると、ユーザーの作業が容易になります。

以前は、ダイアログウィンドウを作成するには、Pop Easy、jQuery UI Dialog、Twitter BootstrapModalなどのjQueryプラグインを使用する必要がありました。 しかし、HTML5の新しい<dialog>要素の導入により、開発者はWebページ上にポップアップダイアログとモーダルを作成することがはるかに簡単になりました。

当初、 <dialog>タグは会話をマークアップするための優れたソリューションとしてHTML5仕様に組み込まれていましたが、2009年にHTML5仕様から削除されました。それでも、新しい形式で再び戻ってきました。

この投稿では、 <dialog>要素について説明し、それを最大限に活用する方法を示します。 さぁ、始めよう！

<dialog>要素の動作を確認したり、コードを試してみたい場合は、ここでライブデモをご覧ください。

<dialog>要素のブラウザサポート

残念ながら、 <dialog>のブラウザサポートは現在制限されています。 この要素は現在、Safari6.0とChromeCanaryでのみサポートされています。 Chrome Canaryはタグを完全にサポートしていますが、使用するにはフラグを有効にする必要があります。 chrome://flagsに移動し、 「実験的なWebプラットフォーム機能を有効にする」フラグを有効にします。

実験的なWebプラットフォーム機能を有効にする

フラグを有効にした後、変更を有効にするにはブラウザを再起動する必要があります。

HTMLDialogElementインターフェイス

<dialog>要素のHTML仕様に含まれているHTMLDialogElementインターフェイスには、ダイアログを表示および非表示にするために使用できる多数のプロパティとメソッドがあります。 それらは次のとおりです。

方法：

HTMLDialogElementインターフェイスには、ダイアログを開いたり閉じたりするための3つのメソッドがあります。

  • show() ：このメソッドはダイアログを表示するために使用されます。 ダイアログボックスが開いている限り、ユーザーはHTMLドキュメントの他のコンテンツにアクセスできます。
  • showModal() ： 「モーダルダイアログ」を起動するために使用されます。これにより、ユーザーはWebページのダイアログウィンドウ以外にはアクセスできなくなります。
  • close() ：ダイアログを閉じるために使用されます。 プロパティreturnValueを更新するオプションのパラメータとしてreturnValueを渡すことができます。

プロパティ：

HTMLDialogElementインターフェイスには2つのプロパティが含まれています。

  • returnValue ：オプションでclose()渡されたパラメーターを取得します。
  • open ：このプロパティはブール値です。 true場合、ダイアログはユーザーに表示されます。 それ以外の場合は、非表示になります。

イベント：

ダイアログを閉じると、 closeイベントが発生します。

 dialog.addEventListener（ 'close'、function（）{
他のコードはここにあります…
}）;

これらの主要なメソッドとプロパティとは別に、 <dialog>要素は以下もサポートします。

  • form[method="dialog"] ：フォームを<dialog>と統合するために使用されます。 ダイアログ内でのみ有効です。
  • autofocus attribute ：ダイアログ内のフォームコントロールにフォーカスを与えるために使用されます。
  • cancel event ： 「Esc」を使用してモーダルダイアログを閉じると、 cancelイベントが発生します。

<dialog>要素の基本を理解した後、いくつかの例を使って実践してみましょう。

ダイアログの作成

まず、簡単なダイアログを作成する方法を紹介します。 以下のコードは、いくつかのコンテンツ、ダイアログを非表示にするための閉じるボタン、およびダイアログを起動するための表示ボタンを含む単純な<dialog>要素を定義します。



レスポンシブジャンクションへようこそ！


既存のサイトをレスポンシブにする

ブラウザで上記のコードをテストすると、以下のスクリーンショットに示すように、機能のない[ダイアログの表示]ボタン以外は何も表示されません。

機能のないダイアログボタンを表示

<dialog>要素を開いたり閉じたりするには、JavaScriptの.show()および.close() ）を使用する必要があります。

 （関数（） {  
 	var dialog = document.getElementById（ 'Dialog'）;
document.getElementById（ 'showDialog'）。onclick = function（）{  
dialog.show（）;  
};  
document.getElementById（ 'closeDialog'）。onclick = function（）{  
dialog.close（）;  
};
}）（）;

「ダイアログの表示」ボタンをクリックすると、ブラウザにダイアログウィンドウが表示されます。 「終了」をクリックすると、ダイアログウィンドウが閉じます。 スクリーンショットは次のとおりです。

[終了]をクリックすると、ダイアログウィンドウが閉じます

ダイアログにスタイルを追加する

他の要素と同じように、CSSスタイルをダイアログに追加できます。 デフォルトでは、ダイアログウィンドウは、他の要素をオーバーレイしている間、水平方向の中央に表示されます。 デフォルトの位置と外観に慣れている場合は、CSSを追加する必要はありません。 それ以外の場合は、以下で行ったように、独自のCSSを追加して、ダイアログウィンドウを好みに合わせてデザインできます。

 ダイアログ{
トップ：28％;
幅：400px;  
ボーダー：1pxソリッドrgba（0、0、0、0.3）;
border-radius：15px;
ボックスシャドウ：0 3px 7px rgba（0、0、0、0.3）;
border-top：5px solid＃eb9816;
}
ボタン{
表示：インラインブロック;
border-radius：3px;
境界線：なし;
フォントサイズ：0.9rem;
パディング：0.4rem 0.8em;
背景：＃eb9816;
border-bottom：1px solid＃f1b75c;
色：白;
フォントの太さ：太字;
マージン：0 0.25rem;
text-align：center;
}
ボタン：ホバー、ボタン：フォーカス{
不透明度：0.92;
カーソル：ポインタ;
}

ダイアログにスタイルを追加する

モーダルダイアログの作成

ユーザーがHTMLのコンテンツにアクセスできないようにする場合は、モーダルダイアログウィンドウを利用できます。 モーダルダイアログウィンドウは、ダイアログが表示される以外のすべてのものをグレー表示するため、ダイアログウィンドウが開いている間、ユーザーはグレー表示されたテキストを選択したり、ボタンをクリックして選択したりすることはできません。

モーダルの作成はダイアログの作成に似ていますが、 .showModal()の代わりに.show() ）を使用する点が異なります。 HTMLコードに変更を加える必要はありません。

（関数（） {  
 	var dialog = document.getElementById（ 'Dialog'）;
document.getElementById（ 'showDialog'）。onclick = function（）{  
ダイアログ。 showModal（）; 
};  
document.getElementById（ 'closeDialog'）。onclick = function（）{  
dialog.close（）;  
};
}）（）;

デフォルトのダイアログは水平方向に中央に表示されますが、モーダルダイアログは垂直方向と水平方向にビューポートの中央に表示されます。 また、 「Escape」キーを押してモーダルダイアログを閉じることもできます。

モーダルダイアログの作成

モーダルダイアログの背景色の追加

<dialog>要素は、 "::backdrop"と呼ばれる疑似要素を備えています。これは、モーダルダイアログでのみ機能します。 この要素を使用すると、メインページを暗くして、アクセスできないことをユーザーに伝えることができます。 標準のCSSプロパティを利用して、背景の位置とスタイルを設定できます。

 dialog :: background {
位置：固定;
上：0;
左：0;
右：0;
下：0;
背景色：rgba（0、0、0、0.7）;
}

モーダルダイアログの背景色の追加

フォームを使用した<dialog>の実装

フォームは、 form method="dialog"を使用して、 <dialog>要素と統合できます。 フォームを送信すると、ダイアログウィンドウが閉じ、 dialog.returnValueプロパティを介して送信ボタンの値が返されます。

フォームダイアログのHTMLコードは次のとおりです。





利用規約に同意しますか？

フォームダイアログには次のJavaScriptを使用してください。

var formDialog = document.getElementById（ 'formDialog'）;
document.getElementById（ 'showformDialog'）。onclick = function（）{  
formDialog.showModal（）;  
};
document.getElementById（ 'submit'）。onclick = function（）{
formDialog.close（value）;
};
document.getElementById（ 'formDialog'）。addEventListener（ 'close'、function（）{
alert（formDialog.returnValue）;
}）;

フォームを使用した<dialog>の実装

注：理解を深めるために、デモではDialogの代わりにformDialogを使用しています。

<dialog>要素の動作を確認したり、コードを試してみたい場合は、ここでライブデモをご覧ください。

結論

<dialog>要素の生まれ変わりにより、開発者はjQueryプラグインを使用せずにダイアログを作成することがはるかに簡単になりました。 ChromeCanaryとSafari6.0は<dialog>要素を適切に解釈しますが、他のブラウザが要素をサポートすることを確認するために利用可能なポリフィルがあります。

他のHTML5プロパティについて知りたい場合は、「HTML5ファイルAPIを使用したグリップの取得」を確認するか、HTML5コンテキストメニュー属性について調べてください。