JavaScript + Ajax 実践サンプル集 - Dialog Modal Message(モダルメッセージ)

Dialog Modal Message(モダルメッセージ)

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQuery UIのdialog()プラグインを利用してメッセージを表示するモダルダイアログを表示します。モダルダイアログの[OK]をクリックするとダイアログを閉じます。

ダイアログにボタンを表示するには、dialog()の引数に「buttons」を追加します。ここでは、[OK]ボタンを表示します。ボタンの標題に空白があるときは「'Close dialog'」のように「'....'」で囲みます。

$("#dialog").dialog({
  autoOpen: false,  // hide dialog
  bgiframe: true,   // for IE6
  modal: true,
  buttons: {
    OK: function() {
      $(this).dialog('close');
    }
  }
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery UI dialog - Modal message </title>
  <link href="jQuery/UI/ui.all.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/UI/demos.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    #dialog p { color: #babaab; }
 		.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }     
  </style>
  <script src="jQuery/jquery-1.3.1.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.core.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.draggable.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.resizable.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.dialog.js" type="text/javascript"></script>
  <script src="jQuery/external/bgiframe/jquery.bgiframe.js" type="text/javascript"></script>

$('#open-dialog').click(function() {
	      $('#dialog').dialog('open');
	    })
	    .hover(
		    function() {
		      $(this).addClass("ui-state-hover");
		    },
		    function() {
		      $(this).removeClass("ui-state-hover");
		    })
	    .mousedown(function() {
	      $(this).addClass("ui-state-active");
	    })
	    .mouseup(function() {
	      $(this).removeClass("ui-state-active");
	    });
	    
	  });
	</script>  
</head>
<body>

<div id="dialog" title="Download complete">
	  <p>
		  <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
		「Downloads」フォルダに正常にダウンロードしました。
	  </p>
	  <p>
		  現在ディスクの<b>36%</b>使用中です。
	  </p>
  </div>

<button id="open-dialog" type="button"
    class="ui-button ui-state-default ui-corner-all">Open dialog</button>

<div class="hiddenInViewSource" style="padding:20px;">
    <a href="http://jsajax.com">jsajax.com</a>
    <form action="">
	    <input value="text input" /><br />
	    <input type="checkbox" />checkbox<br />
	    <input type="radio" />radio<br />
	    <select>
		    <option>select</option>
	    </select><br /><br />
	    <textarea>textarea</textarea><br />
    </form>
  </div>

</div>

</body>
</html>