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

nas2017/05/05

目次

サンプル Dialog Widgetを使用
モーダルでダイアログを開く
インラインスタイルでの非表示をやめる(autoOpen)
ダイアログのボタンを２つにする(確認、キャンセル)
ダイアログで文字を入力して値を取得する
ダイアログの大きさを指定する
右上のXボタンを非表示にする
ダイアログ以外の箇所のクリックで閉じる

Dialog Widgetを使用

  • Dialog Widgetは、jQuery UIのウィジェットでダイアログを表示します。
  • jqueryのライブラリ(jquery.min.js)に加えて、jquery-uiのライブラリ(jquery-ui.min.js)とcss(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;")で非表示にしています。
14行目は、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です。

 

右上のXボタンを非表示にする

右上のXボタンを非表示にしています。

メッセージ

 

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

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

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

<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() {
	$("#div7").dialog({
		autoOpen: false, //呼ばれるまで非表示
		modal:true, //モーダル表示
		title:"テストダイアログ", //タイトル
		open: function() { //Xボタン非表示
			$(".ui-dialog-titlebar-close", $(this).closest(".ui-dialog")).hide();
		},
		buttons: { //ボタン
		"確認": function() {
			$(this).dialog("close");
			}
		}
	});
	$("#button7").click(function() {
		$("#div7").dialog("open");
	});
});
</script>

16～18行目で非表示にしています。

 

ダイアログ以外の箇所のクリックで閉じる

モーダルの箇所をクリックでダイアログが閉じます。

メッセージ

 

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

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

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

<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 () {
        $("#div8").dialog({
            autoOpen: false, //呼ばれるまで非表示
            modal: true, //モーダル表示
            title: "テストダイアログ", //タイトル
        });
        $("#button8").click(function () {
            $("#div8").dialog("open");
        });
        $(document).on("click",".ui-widget-overlay",function(){
            $(this).parent().find("#div8").dialog("close");
        });
    });
</script>

20～22行目は、モーダルの箇所をクリックでダイアログが閉じるようにしています。

関連の記事

jQuery UI アコーディオンのサンプル(accordion)
jQuery カレンダーから日付を入力する(Datepicker)

△上に戻る