jQuery UI ダイアログを開くサンプル(Dialog)

nas2017/05/05

jQuery UIのダイアログを開くサンプルです。
Dialog Widgetを使用します。

確認環境
・Windows10
・Google Chrome

目次

Dialog Widget

  • jQuery UIのライブラリです。
  • ダイアログを表示します。
  • jquery.min.jsに加えてjquery-ui.min.jsとjquery-ui.cssを追加します。
  • 以下はjQuery UIのDialog Widgetのリンクです。
    http://api.jqueryui.com/dialog/

モーダルでダイアログを開く

ボタンを押すとモーダルでダイアログを開きます。
モーダルを使用すると、ダイアログが開いている間、親画面の操作ができなくなります。

コード

上記サンプルのコードです。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<div id="div1" style="display:none;">
<p>メッセージ</p>
</div>
<input type="button" id="button1" value="ボタン1" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
	$("#button1").click(function() {
		$("#div1").dialog({
			modal:true, //モーダル表示
			title:"テストダイアログ1", //タイトル
			buttons: { //ボタン
			"確認": function() {
				$(this).dialog("close");
				}
			}
		});
	});
});
</script>

3～5行目は、CSSのインラインスタイル(style="display:none;")で非表示にしています。
16行目は、modalオプションをtrueにしてモーダル表示にしています。

 

autoOpenオプションでダイアログの表示を制御する

上記コードの3行目は、インラインスタイル(style="display:none;")でダイアログを非表示にしましたが、autoOpenオプションを使用するとインラインスタイルの記述は不要になります。

ボタンを押すとダイアログが開きます。ダイアログの表示はautoOpenオプションで非表示になっています。

メッセージ

コード

上記サンプルのコードです。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<div id="div2" >
<p>メッセージ</p>
</div>
<input type="button" id="button2" value="ボタン2" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
	$("#div2").dialog({
		autoOpen: false, //呼ばれるまで非表示
		modal:true, //モーダル表示
		title:"テストダイアログ2", //タイトル
		buttons: { //ボタン
		"確認": function() {
			$(this).dialog("close");
			}
		}
	});
	$("#button2").click(function() {
		$("#div2").dialog("open");
	});
});
</script>

13行目は、autoOpenオプションでfalseを指定しています。そのため3～5行目のhtmlは表示されません。
23行目でダイアログを開いています。

 

ダイアログのボタンを２つにする(確認、キャンセル)

ボタンを押すと、ボタンが２つあるダイアログが表示されます。

コード

上記サンプルのコードです。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<div id="div3" style="display:none;">
<p>メッセージ</p>
</div>
<input type="button" id="button3" value="ボタン3" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
	$("#button3").click(function() {
		$("#div3").dialog({
			modal:true, //モーダル表示
			title:"テストダイアログ3", //タイトル
			buttons: { //ボタン
			"確認": function() {
				$(this).dialog("close");
				},
			"キャンセル": function() {
				$(this).dialog("close"); 
				}
			}
		});
	});
});
</script>

17～22行目のbuttonsオプションでボタンを2つに設定しています。

 

ダイアログで文字を入力して値を取得する

ダイアログで文字を入力して値を取得するサンプルです。
ダイアログを開いて文字を入力すると画面に入力した値が表示されます。

 

コード

上記サンプルのコードです。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<div id="div4" style="display:none;">
<input type="text" id="input1" size="5" maxlength="5">
</div>
<p id="p4"></p>
<input type="button" id="button4" value="ボタン4" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
	$("#button4").click(function() {
		$("#div4").dialog({
			modal:true, //モーダル表示
			title:"テストダイアログ4", //タイトル
			buttons: { //ボタン
			"確認": function() {
				$("#p4").text($("#input1").val());
				$(this).dialog("close");
				},
			"キャンセル": function() {
				$(this).dialog("close"); 
				}
			}
		});
	});
});
</script>

19行目は、4行目のテキストボックスの値を取得し、6行目に値をセットしています。

 

ダイアログの大きさを指定する

ダイアログの大きさを指定するサンプルです。
ボタンを押すと縦と横が150pxのダイアログが表示されます。

コード

上記サンプルのコードです。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<div id="div5" style="display:none;">
<p>メッセージ</p>
</div>
<input type="button" id="button5" value="ボタン5" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
	$("#button5").click(function() {
		$("#div5").dialog({
			modal:true, //モーダル表示
			width:150, //ダイアログの横幅(px)
			height:150, //ダイアログの縦幅(px)
			title:"テストダイアログ1", //タイトル
			buttons: { //ボタン
			"確認": function() {
				$(this).dialog("close");
				}
			}
		});
	});
});
</script>

15,16行目は、widthオプションとheightオプションで、ダイアログの横幅と縦幅を指定しています。単位はpxです。

関連の記事

jQuery UI アコーディオンのサンプル(accordion)
jQuery カレンダーから日付を入力する(Datepicker)
jQuery UI タブのサンプル(tabs)
jQuery UI ツールチップのサンプル(tooltip)
jQuery UI 要素の並び順を変えるサンプル(sortable)
jQuery UI オートコンプリートのサンプル(Autocomplete)
jQuery ドラッグ・アンド・ドロップする(draggable)

△上に戻る