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

nas2017/05/05

目次

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

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.13.2/themes/smoothness/jquery-ui.css">

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
$(function() {
	$("#button1").click(function() {
		$("#div1").dialog({
			modal:true, //モーダル表示
			title:"テストダイアログ", //タイトル
			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.13.2/themes/smoothness/jquery-ui.css">

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
$(function() {
	$("#div2").dialog({
		autoOpen: false, //呼ばれるまで非表示
		modal:true,
		title:"テストダイアログ",
		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.13.2/themes/smoothness/jquery-ui.css">
<div id="div3" style="display:none;">
<p>メッセージ</p>
</div>
<input type="button" id="button3" value="ボタン" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
$(function() {
	$("#button3").click(function() {
		$("#div3").dialog({
			modal:true,
			title:"テストダイアログ",
			buttons: {
			"確認": function() {
				$(this).dialog("close");
				},
			"キャンセル": function() {
				$(this).dialog("close"); 
				}
			}
		});
	});
});
</script>

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

 

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

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

 

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

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/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="ボタン" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
$(function() {
	$("#button4").click(function() {
		$("#div4").dialog({
			modal:true,
			title:"テストダイアログ",
			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.13.2/themes/smoothness/jquery-ui.css">
<div id="div5" style="display:none;">
<p>メッセージ</p>
</div>
<input type="button" id="button5" value="ボタン" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
$(function() {
	$("#button5").click(function() {
		$("#div5").dialog({
			modal:true,
			width:150, //ダイアログの横幅(px)
			height:150, //ダイアログの縦幅(px)
			title:"テストダイアログ",
			buttons: {
			"確認": function() {
				$(this).dialog("close");
				}
			}
		});
	});
});
</script>

13,14行目は、widthオプションとheightオプションで、ダイアログの横幅と縦幅を指定しています。単位はpxです。
ダイアログの内容が縦に長い時、heightを指定すれば縦スクロールが表示されます。

 

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

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

メッセージ

 

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

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/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.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/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>

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

 

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

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

メッセージ

 

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

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/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.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/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>

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

 

ダイアログの表示位置を指定する(position)

ダイアログの表示位置を画面topから10px下がったところに指定します。

メッセージ

 

 

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

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<div id="div11" >
<p>メッセージ</p>
</div>
<input type="button" id="button11" value="ボタン" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
$(function() {
	$("#div11").dialog({
		autoOpen: false,
		modal:true,
		title:"テストダイアログ",
		position: {my: "top", at: "top+10"}, //位置
		buttons: {
		"確認": function() {
			$(this).dialog("close");
			}
		}
	});
	$("#button11").click(function() {
		$("#div11").dialog("open");
	});
});
</script>

14行目は、ダイアログの表示位置を指定しています。
myは、垂直の位置と水平の位置を指定します。(left,center,right,pxまたは%を指定)
atは、どの位置に配置するかを指定します。(top,center,bottom,pxまたは%を指定)

関連の記事

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

△上に戻る