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

キーワード

  • jQuery
  • jQuery UI
  • dialog

やりたいこと

別ファイルに切り出した html ファイルの内容をダイアログ表示します。

前提条件

  • jQuery/jQuery UI を使う

方法

  • 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;
});

詳細

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

参考

作成日 2014-04-02