HTML コード

再び、HTMLコーディングは、基本的なセットアップと違いはありません。 トリガの要素とそれに対応するオーバレイ要素があります。ここで、ボタンにクラス名 "close" を 割り当てることにより、明示的に[閉じる]ボタンを定義したことに注意してください。 これは、自動的に close アクションをそれにバインドします。

<!-- トリガ -->
<p>
  <button class="modalInput" rel="#yesno">Yes or no?</button>
  <button class="modalInput" rel="#prompt">User input</button>
</p>
 
<!-- yes/no ダイアログ -->
<div class="modal" id="yesno">
  <h2>This is a modal dialog</h2>
 
  <p>
    あなたは、このダイアログ内部にある要素と対話することができます。
    閉じるには、それはボタンをクリックするか、ESCキーを使用します。
  </p>
 
  <!-- yes/no ボタン -->
  <p>
    <button class="close"> Yes </button>
    <button class="close"> No </button>
  </p>
</div>
 
<!-- ユーザ入力ダイアログ -->
<div class="modal" id="prompt">
  <h2>This is a modal dialog</h2>
 
  <p>
    あなたは、このダイアログ内部にある要素と対話することができます。
    閉じるには、それはボタンをクリックするか、ESCキーを使用します。
  </p>
 
  <!-- 入力フォーム。enter も押すことができる -->
  <form>
    <input />
    <button type="submit"> OK </button>
    <button type="button" class="close"> Cancel </button>
  </form>
  <br />
 
</div>

CSS コード

ここには何も特別なものはありません。 ダイアログと、その中のいくつかの要素のスタイルを設定します:

  .modal {
    background-color:#fff;
    display:none;
    width:350px;
    padding:15px;
    text-align:left;
    border:2px solid #333;
 
    opacity:0.8;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -moz-box-shadow: 0 0 50px #ccc;
    -webkit-box-shadow: 0 0 50px #ccc;
  }
 
  .modal h2 {
    background:url(/media/img/global/info.png) 0 50% no-repeat;
    margin:0px;
    padding:10px 0 10px 45px;
    border-bottom:1px solid #333;
    font-size:20px;
  }

JavaScript コード

最初に、トリガ要素がダイアログを開くことを可能にします。 jQueryセレクタの .modalInput で要素を選択し、 2つコンフィギュレーション変数を使用してオーバレイを初期化します。 mask 変数は、半透明のマスクを有効にします。その色を "#ebecff" に設定します。closeOnClick 変数を falseに設定することで、 "modal" 機能（ダイアログが閉じられるまで、文書の残りの部分はマスクによって 無効になっているため、オーバレイが開いている間は、ユーザがメイン文書と対話すること ができない）を有効にします。

  var triggers = $(".modalInput").overlay({
 
      // マスクは、モーダルダイアログに適した若干の調整
      mask: {
        color: '#ebecff',
        loadSpeed: 200,
        opacity: 0.9
      },
 
      closeOnClick: false
  });

Yes/No プロンプト

ここに、yes/no プロンプトのコードがあります。両方のボタンにクリックイベントをバインドし、 jQueryの index メソッドを使用して、どボタンがクリックされたかを知ります。 結果が分った後は、単にトリガへ答えを書き込むだけです。もちろん、その結果より多くの有用 なことを行う必要があります。

  var buttons = $("#yesno button").click(function(e) {
 
      // ユーザ入力の取得
      var yes = buttons.index(this) === 0;
 
      // 答えに何かをする
      triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
  });

Input プロンプト

ここでは、ダイアログ内の FORM 要素へ、submit イベントハンドラを バインドします。このハンドラは、オーバレイAPIコール close を使用して オーバレイを閉じます。デフォルトのフォーム送信アクションは、 e.preventDefault() を返すことでキャンセルすることができます。

$("#prompt form").submit(function(e) {
 
      // オーバレイを閉じる
      triggers.eq(1).overlay().close();
 
      // ユーザ入力の取得
      var input = $("input", this).val();
 
      // 答えに何かをする
      triggers.eq(1).html(input);
 
      // フォームを送信しない
      return e.preventDefault();
  });