MILK2017/8/4更新jQueryでダイアログ表示を作成する4タイトルとURLをコピーjQueryを使ってダイアログをつくる方法には、大きくわけてjQueryのライブラリを使い実装する方法と、jQueryだけで実装する方法の2つがあります。UIというライブラリを使ってライブラリを実装する方法と、jQueryだけで実装する方法の2つを紹介します。UIとは、jQuery公式のUI用ライブラリです。これを使うことで、ダイアログ、カレンダーやドラッグ移動などの複雑な処理を簡単に実装することができます。UI本体とテーマCSSを読み込みます。Smoothnessというテーマを読み込みます。UIの使い方と基本サンプルサンプルシンプルなダイアログのサンプルです。display:none;を指定して非表示にしています。style="display:none;"><p>ダイアログです</p></div>次に、jQueryです。dialog()を使うことで、ダイアログとして表示します。function(){$("#sample-dialog").dialog();});「ダイアログを開く」ボタンをクリックすることで、以下のように表示されます。UI公式ドキュメントのダイアログのページを参照してください。UIを使うとライブラリの分だけやや読み込むが遅くなりますが、簡単に作成したい時はおすすめです。UIを使いたくないという場合は、jQueryだけでも簡単に作成することができます。サンプルシンプルなボタンクリックでダイアログが開き、閉じるボタンでダイアログが閉じるというサンプルです。HTMLは以下のようになります。ダイアログには、jQueryで扱うためにID属性(sample-dialog)を指定しています。id="open-sample-dialog">ダイアログを開く</button>CSSは以下のようになります。ダイアログのleftプロパティは、次で説明するjQueryで指定します。auto;}jQueryは、以下の通りです。ダイアログをセンタリングするために、leftの値をウィンドウ幅とダイアログ幅から計算し表示します。閉じるボタンをクリックした時に、ダイアログを非表示にします。function(){$(this).parents(".dialog").hide();});「ダイアログを開く」ボタンをクリックすると、以下のように表示されます。UIと比べるとやや実装が面倒になりますが、より細かい点までカスタマイズしやくなっています。MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。