キーワード†
- 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 タグも入れ込んでしまうので注意です。