Top > 開発ガイド > Spinelzリファレンス > Modal

Modal

概要

  • 指定された要素をモーダル化します。（指定要素以外操作不能になります。）

利用方法

<script src="../src/javascripts/spinelz_lib/prototype.js" type="text/javascript"></script>
<script src="../src/javascripts/spinelz_lib/scriptaculous.js" type="text/javascript"></script>
<script src="../src/javascripts/spinelz_lib/spinelz_util.js" type="text/javascript"></script>
<link rel="stylesheet" href="../src/stylesheets/spinelz/modal.css" type="text/css">
<body>
  <input type="button" id="target" value="target">
  <div id="target" style="width: 500px; height: 500px; border: 1px solid red;">Test</div>
  <script type="text/javascript">
    Modal.mask('target');
  </script>
</body>
</html>

※制約事項 モーダルの対象となる要素の親（祖先）要素にposition:static以外を指定しないで下さい。 モーダルが有効にならない場合があります。

API

mask(excepted)

指定されたHTML要素をモーダル化します。

引数説明
exceptedHTML要素のID。この要素がモーダル化されます。

オプション 第2引数として以下のオプションを指定することができます。 オプションを指定するかどうかは任意です。

オプション名デフォルト値説明
cssPrefix'custom_'excepted要素の下をマスクするHTML要素につけるカスタムスタイルシートのプレフィックス文字列です。最初の呼び出し時のみ有効です。
zIndexnullexcepted要素の下をマスクするHTML要素につけるz-index値を指定します。詳細はZindexManager?を参照して下さい。

unmask()

モーダルを解除します。

addMaskCallback(callback)

mask()時に呼ばれるするコールバック関数を追加します。 同じコールバック関数を複数登録することはできません。

引数説明
callbackmask時に呼ばれるコールバック関数。コールバック関数は、excepted要素（maskのAPI参照）を引数として受け取ります。

removeMaskCallback(callback)

mask()時に呼ばれるコールバック関数の中から指定したコールバック関数を削除します。

引数説明
callbackmask時に呼ばれる登録済みのコールバック関数。

clearMaskCallback

mask()時に呼び出される全てのコールバック関数を削除します。

addUnmaskCallback(callback)

unmask()時に呼ばれるするコールバック関数を追加します。 同じコールバック関数を複数登録することはできません。

引数説明
callbackunmask時に呼ばれるコールバック関数。

removeUnmaskCallback(callback)

unmask()時に呼ばれるコールバック関数の中から指定したコールバック関数を削除します。

引数説明
callbackunmask時に呼ばれる登録済みのコールバック関数。

clearUnmaskCallback

unmask()時に呼び出される全てのコールバック関数を削除します。