表示オプションの設定

ModalBoxはオプションを指定することでダイアログの幅や表示する文字などを指定することができます。表示オプションはModalbox.show()の2番目のパラメータで指定します。2番目のパラメータは{ プロパティ名 : 値 } の形式で指定します。プロパティ名が複数ある場合は,（カンマ）で区切って列記します。サンプル02ではwidthで横幅、heightで縦幅を指定しています。

サンプル02の実行結果

サンプル02

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>ModalBox サンプル</title>
    <link rel="stylesheet" href="css/modalbox.css" type="text/css" media="all">
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js"></script>
    <script type="text/javascript" src="js/modalbox.js"></script>
    <script type="text/javascript"><!--
    window.onload = function(){
        $("mbox1").onclick = function(){
            Modalbox.show(this.href, { title : "ModalBoxについて", width:400, height:400});
            return false;
        }
    }
    // --></script>
</head>
<body>
<h1>ModalBox サンプル</h1>
    <div>
        <a href="about.html" id="mbox1">ダイアログにabout.htmlファイルを表示</a>
    </div>
</body>
</html>

ModalBoxは表示されたダイアログの外側をクリックした場合、ダイアログは自動的に閉じられます。外側をクリックしてもダイアログが閉じないようにするには、オプションにoverlayClose : falseを指定します。サンプル03ではオプションにoverlayClose : falseを指定しているためダイアログが表示された際にダイアログの外側をクリックしても何も反応しません。

サンプル03の実行結果

サンプル03

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>ModalBox サンプル</title>
        <link rel="stylesheet" href="css/modalbox.css" type="text/css" media="all">
        <script type="text/javascript" src="js/prototype.js"></script>
        <script type="text/javascript" src="js/scriptaculous.js"></script>
        <script type="text/javascript" src="js/modalbox.js"></script>
        <script type="text/javascript"><!--
        window.onload = function(){
            $("mbox1").onclick = function(){
                Modalbox.show(this.href,
                {
                    title : "ModalBoxについて",
                    width:400,
                    height:200,
                    overlayClose : false
                });
                return false;
            }
        }
        // --></script>
    </head>
    <body>
    <h1>ModalBox サンプル</h1>
        <div>
            <a href="about.html" id="mbox1">ダイアログにabout.htmlファイルを表示</a>
        </div>
    </body>
</html>

ModalBoxはアニメーションで表示されますが、この速度を指定することができます。指定できるものは以下の4つになります。指定する値は秒数になります。

overlayDuration オーバーレイの時間
slideDownDuration 下にスライドする時間
slideUpDuration 上にスライドする時間
resizeDuration リサイズする時間

サンプル04では、アニメーションの処理時間を0秒にしているためダイアログは瞬時に表示されます。

サンプル04の実行結果

サンプル04

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>ModalBox サンプル</title>
        <link rel="stylesheet" href="css/modalbox.css" type="text/css" media="all">
        <script type="text/javascript" src="js/prototype.js"></script>
        <script type="text/javascript" src="js/scriptaculous.js"></script>
        <script type="text/javascript" src="js/modalbox.js"></script>
        <script type="text/javascript"><!--
        window.onload = function(){
            $("mbox1").onclick = function(){
                Modalbox.show(this.href,
                {
                    title : "ModalBoxについて",
                    width:400,
                    height:200,
                    overlayDuration : 0,
                    slideDownDuration : 0,
                    slideUpDuration : 0,
                    resizeDuration : 0
                });
                return false;
            }
        }
        // --></script>
    </head>
    <body>
    <h1>ModalBox サンプル</h1>
        <div>
            <a href="about.html" id="mbox1">ダイアログにabout.htmlファイルを表示</a>
        </div>
    </body>
</html>

ModalBoxはデフォルトの状態では、読み込み中の文字と閉じるのツールチップが英語になっています。これらの表示文字はオプションで変更することができます。読み込み中の文字はloadingString、閉じるの文字はcloseStringで指定することができます。サンプル05では、日本語で表示するようにオプションを設定しています。

サンプル05の実行結果

サンプル05

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>ModalBox サンプル</title>
        <link rel="stylesheet" href="css/modalbox.css" type="text/css" media="all">
        <script type="text/javascript" src="js/prototype.js"></script>
        <script type="text/javascript" src="js/scriptaculous.js"></script>
        <script type="text/javascript" src="js/modalbox.js"></script>
        <script type="text/javascript"><!--
        window.onload = function(){
            $("mbox1").onclick = function(){
                Modalbox.show(this.href,
                {
                    title : "ModalBoxについて",
                    width:400,
                    height:200,
                    loadingString : "読み込み中...",
                    closeString : "閉じる"
                });
                return false;
            }
        }
        // --></script>
    </head>
    <body>
    <h1>ModalBox サンプル</h1>
        <div>
            <a href="about.html" id="mbox1">ダイアログにabout.htmlファイルを表示</a>
        </div>
    </body>
</html>