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

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

Dialog Widget

  • jQuery UIのライブラリです。
  • ダイアログを表示します。
  • modalオプションでモーダルにすることができます。
  • モーダルを使用すると、ダイアログが開いている間、親の画面の操作ができなくなります。
  • jquery.min.jsに加えてjquery-ui.min.jsとjquery-ui.cssを追加します。
  • 以下はjQuery UIのDialog Widgetのリンクです。
    http://api.jqueryui.com/dialog/

サンプル

Dialog Widgetのサンプルです。
ボタンを押すとモーダルでダイアログを表示します。

コード

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのdialogのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
</style>
<script>
$(function() {
	// 1.ボタン1を押したとき
	$("#id1").click(function() {
		$("#test1").dialog({
			modal:true, //モーダル表示
			title:"テストダイアログ1", //タイトル
			buttons: { //ボタン
			"確認": function() {
				$(this).dialog("close");
				}
			}
		});
	});
});
</script>
</head>
<body >
<div id="test1" style="display:none;">
<p>メッセージ</p>
</div>
<input type="button" id="id1" value="ボタン1" />
</body>
</html>

ダイアログのボタンを2つにする

ダイアログのボタンを2つにする場合、上記サンプルコードを以下のようにします。

		$("#test1").dialog({
			modal:true, //モーダル表示
			title:"テストダイアログ2", //タイトル
			buttons: { //ボタン
			"確認": function() {
				$(this).dialog("close");
				},
			"キャンセル": function() {
				$(this).dialog("close"); 
				}
			}
		});

サンプルです。

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

ダイアログの大きさを指定する場合、上記サンプルコードを以下のようにします。

		$("#test1").dialog({
			modal:true, //モーダル表示
			width:300, //ダイアログの横幅(px)
			height:150, //ダイアログの縦幅(px)
			title:"テストダイアログ1", //タイトル
			buttons: { //ボタン
			"確認": function() {
				$(this).dialog("close");
				}
			}
		});

サンプルです。

関連の記事

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

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る