jQueryUI Dialog Test

by yasumodev

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--ダイアログの内容-->
<!--
<div id="hogehoge" title="サンプルタイトル">オリジナルダイアログをポップアップ表示するサンプル。</div>
 -->
<!--ダイアログを呼び出すボタン-->
<button id="btn1">処理実行１</button>
<button id="btn2">処理実行２</button>
<button id="btn3">処理実行３</button>

JavaScript

jQuery(function($){
	//$('body').append('<div id="hogehoge" title="たいとる">ダイアログをポップアップ表示するサンプル。</div>');
	
  // 画面表示時にダイアログが表示されないよう設定
  //$("#hogehoge").dialog({ autoOpen: false });
 
  // ボタン１のクリックイベント
  $("#btn1").click(function(){
  	$('body').append('<div id="hogehoge" title="たいとる">ダイアログをポップアップ表示するサンプル。</div>');
		$("#hogehoge").dialog({ 
    	autoOpen: false,
      buttons: [
        {
        	text: "AAA",
          click: function () {alert("click AAA");}
        },
        {
        	text: "BBB",
          click: function () {alert("click BBB");}
        }
      ],
      close: function(){$("#hogehoge").remove();}
    });
		$("#hogehoge").dialog("open");
  });

  // ボタン２のクリックイベント
  $("#btn2").click(function(){
  	var html_dialog = '<div>ダイアログサンプル。</div>';
  	$(html_dialog).dialog({ 
    	title: 'タイトル２',
      buttons: [
        {
        	text: "AAA",
          click: function () {alert("click AAA");}
        },
        {
        	text: "BBB",
          click: function () {alert("click BBB");}
        }
      ],
      close: function(){
      	$(this).remove();
      }
    });
		//$("#hogehoge").dialog("open");
  });
});

  // ボタン３のクリックイベント
  $("#btn3").click(function(){
  	var buttons = [
        {
        	text: "OK",
          click: function () {alert("OK!!");}
        },
        {
        	text: "×",
          click: function () {$(this).dialog('close');}
        }
    ];
  	showDialog("だいあろぐ", "てすと！", buttons);
	});

// ダイアログ表示
function showDialog(title, message, buttons)
{
  	var html_dialog = '<div>' + message + '</div>';
  	$(html_dialog).dialog({
    	title:   title,
      buttons: buttons,
      close:   function() { $(this).remove(); }
    });
}