JavaScript + Ajax 実践サンプル集 - Dialog Modal Form (モダルフォーム)

Dialog Modal Form (モダルフォーム)

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

このサンプルは、jQuery UIのdialog()プラグインを利用して新規アカウントを登録するためのダイアログを表示します。ダイアログが表示されたら、名前、メール、パスワードを入力して [Create an account]ボタンをクリックします。登録を中止するときは[Cancel]ボタンをクリックします。

このサンプルを編集して試してみる

$("#dialog").dialog({
  bgiframe: true,
  autoOpen: false,
  height: 300,
  modal: true,
  buttons: {
    'Create an account': function() {
      $(this).dialog('close');
    },
    Cancel: function() {
      $(this).dialog('close');
    }
  },
  close: function() {
  
  }
});

<!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 form </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">
		body { font-size: 62.5%; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }
		.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }
  </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>

$(function() {

$("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        height: 300,
        modal: true,
        buttons: {
          'Create an account': function() {
            $(this).dialog('close');
          },
          Cancel: function() {
            $(this).dialog('close');
          }
        },
        close: function() {
          //$(this).dialog('close');
        }
      });

$('#create-user').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="Create new user">
	  <p id="validateTips">すべての項目を入力してください.</p>
	  <form action="" >
	    <fieldset>
		    <label for="name">名前(Name)</label>
		    <input type="text" name="name" id="name" 
		            class="text ui-widget-content ui-corner-all" />
		    <label for="email">メール(Email)</label>
		    <input type="text" name="email" id="email" value="" 
		            class="text ui-widget-content ui-corner-all" />
		    <label for="password">パスワード(Password)</label>
		    <input type="password" name="password" id="password" value="" 
		            class="text ui-widget-content ui-corner-all" />
	    </fieldset>
	  </form>
  </div>

<button id="create-user" 
    class="ui-button ui-state-default ui-corner-all">Create new user</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>