[jQuery UI] ダイアログを実装する（Dialog） – コピペで使える JavaScript逆引きリファレンス

jQueryUIでダイアログを実装するサンプルです。

サンプルソース

例）jQuery UIを使ったダイアログのサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryUIダイアログサンプル</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(function(){
  $("#btn1").click(function(){
    $("#dig1").dialog({
       modal:true
      ,show:"slide"      //表示時のアニメーション
      ,hide:"explode"    //閉じた時のアニメーション
      ,title:"タイトル"   //ダイアログのタイトル
      ,width:400         //ダイアログの横幅を400pxに
      ,height:300        //ダイアログの高さを300pxに
      ,resizable:false   //リサイズ不可
      ,closeOnEscape:false  //[ESC]キーで閉じられなくする
      ,draggable:false   //ダイアログの移動を不可に
      ,buttons:{
        "OK":function(){  //OKボタン
          $(this).dialog("close");
        },
        "Cancel":function(){  //Cancelボタン
          $(this).dialog("close");
        }
      }
    });
  });
});
</script>
</head>
<body>
  <div id="dig1" style="display:none;">
    <p>ダイアログです</p>
  </div>
  <input type="button" id="btn1" value="ダイアログ表示" />
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQueryUIダイアログサンプル</title>

$(function(){

$("#btn1").click(function(){

$("#dig1").dialog({

modal:true

,show:"slide" //表示時のアニメーション

,hide:"explode" //閉じた時のアニメーション

,title:"タイトル" //ダイアログのタイトル

,width:400 //ダイアログの横幅を400pxに

,height:300 //ダイアログの高さを300pxに

,resizable:false //リサイズ不可

,closeOnEscape:false //[ESC]キーで閉じられなくする

,draggable:false //ダイアログの移動を不可に

,buttons:{

"OK":function(){ //OKボタン

$(this).dialog("close");

"Cancel":function(){ //Cancelボタン

$(this).dialog("close");

}

});

</script>

</head>

<body>

<p>ダイアログです</p>

</div>

</body>

</html>

実行サンプル

ボタンを押すとダイアログが表示されます。

オプション

Dialogのオプションには以下のようなものがあります。

【オプション】
オプション	意味
autoOpen	ダイアログを自動表示するかどうか　true：する　false：しない
modal	モーダルとするかどうか　true：する　false：しない
show	表示時のアニメーションを指定　※以下のような指定ができます。　"blind", "bounce", "clip", "drop", "explode", "fade", "fold","highlight","puff","pulsate", "scale", "shake", "size", "slide"
hide	閉じるときのアニメーションを指定　※以下のような指定ができます。　"blind", "bounce", "clip", "drop", "explode", "fade", "fold","highlight","puff","pulsate", "scale", "shake", "size", "slide"
title	タイトルを指定　例）title:"タイトルです"
width	幅を指定　例）width:400
height	高さを指定　例）width:400
resizable	ダイアログのサイズを変更できるかどうか　true：変更可（デフォルト）　false：変更不可
closeOnEscape	[ESC]キーで閉じれるかどうか　true：可（デフォルト）　false：不可
draggable	ダイアログをドラッグして移動できるかどうか　true：移動可（デフォルト）　false：移動不可
buttons	表示するボタンと処理を指定　※上記サンプル参照

解説

オプションは上記以外にもあります。
jQueryUI（Dialog）公式ページ ⇒ https://jqueryui.com/dialog/