jQuery UI にはダイアログ表示に便利な dialog メソッドが用意されています。通常の使い方としては、あらかじめ html 部分でダイアログの UI を定義しておきますが、事前の html 定義不要で、JavaScript のみで動的に生成することもできます。
▼ダイアログ表示例
１）jQuery UI などの定義
まず初めに jQuery および jQuery UI の宣言が必要です。ダウンロードするのは面倒なので、今回は CDN のを使います。
html
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
２）テスト用ボタンの作成
次に、テスト用のボタンを設置します。
html
<body>
<button id="btn1">ダイアログ表示</button>
</body>
３）ダイアログ表示処理
ボタンを押すと、ダイアログが表示されるように、処理を記述します。
JavaScript
// ボタン押した時の処理
$("#btn1").click(function(){
// ダイアログ用のボタン（配列）
var buttons = [
{
text: "OK",
click: function () { alert("OK!!"); }
},
{
text: "閉じる",
click: function () { $(this).dialog('close'); }
}
];
// ダイアログを表示
showDialog("たいとる", "めっせーじ", buttons);
});
//------------------------------
// ダイアログ表示
//------------------------------
function showDialog(title, message, buttons)
{
var html_dialog = '<div>' + message + '</div>';
$(html_dialog).dialog({
title: title,
buttons: buttons,
close: function() { $(this).remove(); }
});
}
※動的に生成しているので、ダイアログの close イベントで、きちんと破棄するようにしています。
デモはこちら。
https://jsfiddle.net/yasumodev/7d4n6ryn/2/
(･o･ゞ いじょー。