ModalBoxを使う

ModalBoxを使うには先にprototype.jsライブラリとscript.aculo.usライブラリを読み込ませます。一番最後にmodalbox.jsファイルを読み込ませます。これは<script>タグを使い以下のように記述します。

<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.aculo.usライブラリに含まれるbuild.js, effect.jsファイルの2つを直接読み込ませても構いません。ModalBoxを表示するにはModalbox.show()を使います。最初のパラメータにはダイアログに表示するURLを指定します。URLは異なるドメインのページを指定することはできません。指定してもエラーにはなりませんが、非同期通信の制約上ダイアログ内に表示させることはできません。2番目のパラメータがダイアログを表示する際のオプションになります。ダイアログのタイトルを表示するにはオプションで{ title : ダイアログタイトル } を指定します(*2)。

Modalbox.show(表示先URL, { title : ダイアログタイトル } )

サンプル01ではリンク文字をクリックすると、<a>タグのhref属性で指定されたページをダイアログを表示します。<a>タグがクリックされた時にダイアログを表示するようになっているため、処理後にはreturn falseを指定する必要があります。これを指定しないと、<a>タグで指定したページに移動してしまいます。サンプル01のような使い方であればJavaScriptが動作しない環境でも問題なくリンク先の内容を閲覧することができます。

本稿の配置図

サンプル01の実行結果

リンクをクリックするとリンク先が表示される
*2 ver 1.5.3までとパラメータが異なるので注意が必要です。ver 1.5.3まではModalbox.show(ダイアログタイトル, 表示先URL)となっています。

サンプル01

<!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について"} );
                return false;
            }
        }
        // --></script>
    </head>
    <body>
    <h1>ModalBox サンプル</h1>
        <div>
            <a href="about.html" id="mbox1">ダイアログにabout.htmlファイルを表示</a>
        </div>
    </body>
</html>