JavaScript/別ファイルの内容をダイアログ表示するの変更点

Top/JavaScript/別ファイルの内容をダイアログ表示する

* キーワード [#w9522de9]
- jQuery
- jQuery UI
- dialog

* やりたいこと [#b3ce488f]
別ファイルに切り出した html ファイルの内容をダイアログ表示します。

** 前提条件 [#v179d2f3]
- jQuery/jQuery UI を使う

* 方法 [#d4101add]
- id="popup-button" をクリックして
- dialog.html の要素 id="document-root" の内容を
- ダイアログ表示する

には次のようにします。
 $('#popup-button').click(function() {
 	$('<div />')
 	.load('dialog.html #document-root')
 	.dialog({
 		modal: true,
 		title: 'ダイアログのタイトル',
 		resizable: false,
 		width: 600,
 		height: 400
 	}).dialog('open');
 	return false;
 });


* 詳細 [#yd11787d]
関数 load() はファイルパスに続けてセレクタを記述することができます。セレクタを記述しないと、別ファイルに完全な html を書いている場合 link タグや script タグも入れ込んでしまうので注意です。

* 参考 [#kc5719e9]
- [[Dialog Widget | jQuery UI API Documentation>http://api.jqueryui.com/dialog/]]
- [[ブログ&#65306;図書館合金: jQuery UIのDialogで&#12289;開くウインドウの中身を別ファイルにしたい>http://uedatakeshi.blogspot.jp/2010/10/jquery-uidialog.html]]