JavaScript + Ajax 実践サンプル集 - Dialog Modal Dialog (モダルダイアログ)

Dialog Modal Dialog (モダルダイアログ)　《プログラマーがネットで副収入を得る方法とは》

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

このサンプルは、jQuery UIのdialog()プラグインを利用してモダル型のダイアログを表示します。モダルダイアログが表示されているときは、メインコンテンツをグレーアウトします。ダイアログは移動したり、リサイズすることができます。

モダル型のダイアログを表示するには、dialog()の引数に「modal: true」を指定します。

$('#dialog').dialog({
  autoOpen: false,  // hide dialog
  bgiframe: true,   // for IE6
  height: 140,
  modal: true
});

<!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 confirmation </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>

$('#dialog').dialog({
        autoOpen: false,  // hide dialog
        bgiframe: true,   // for IE6
        resizable: false,
        height: 140,
        modal: true,
        overlay: {
          backgroundColor: '#000',
          opacity: 0.5
        },
        buttons: {
          OK: function() {
            $(this).dialog('close');
          },
          Cancel: function() {
            $(this).dialog('close');
          }
        }
      });

$('#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=" Modal Confirmation">
	  <p>
	    <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
	    このファイルを削除してよろしいですか？
   </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>