確認ダイアログを表示する

確認ダイアログを表示するにはnew LITBox()の2番目のtypeオプションでconfirmを指定します。確認ダイアログの場合、YesかNoのボタンがクリックされることになります。LITBoxではYesボタンがクリックされた場合のみ処理を指定し実行させることができます。この場合、new LITBox()の2番目のオプションでfunc:を指定し実行する処理を指定します。サンプル08では、Yesボタンが押された場合のみページ上にメッセージを表示します。

サンプル08の実行結果

yes/noを求める確認ダイアログが表示

yesを押した場合に処理される

サンプル08

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <link rel="stylesheet" href="LITBox/litbox.css" type="text/css">
            <script type="text/javascript" src="LITBox/prototype.js"></script>
            <script type="text/javascript" src="LITBox/scriptaculous.js"></script>
            <script type="text/javascript" src="LITBox/litbox.js"></script>
            <script type="text/javascript"><!--
            window.onload = function(){
                Event.observe($("openWin"), "click", function(){
                    new LITBox("本当にデータを保存しますか？", {
                        type:"confirm", width:300, height:150,
                        func:function(){
                            $("statusMessage").innerHTML = "保存しました";
                        }
                         });
                }, true);
            }
            // --></script>
            <title>LITBoxサンプル</title>
        </head>
        <body>
        <h1>LITBoxサンプル</h1>
            <div>
                <a href="#" id="openWin">確認ダイアログを表示</a>
            </div>
            <div id="statusMessage"></div>
        </body>
    </html>

最後に他のサイトをページ内に表示する方法について説明します。まず、HTMLファイル（例:otherSite.html）を用意し<iframe>タグを使って表示するサイトを指定します。次にnew LITBox("otherSite.html")とすることでLITBoxウィンドウ上に他のサイトを表示できます。

iframeタグを使って別のサイトを表示した場合の実行画面

LITBoxは軽量なウィンドウライブラリなので、ちょっとした用途でウィンドウを表示したい場合に便利です。より高度なウィンドウ処理を行いたいのであればPrototype Window Classを使用すると良いでしょう。