アラートダイアログを表示する

LITBoxではnew LITBox()の2番目のオプションにtype:"alert"を指定することでアラートダイアログを表示させることができます。この場合、LITBoxの最初のパラメータがアラートダイアログに表示される文字列になります。

サンプル04の実行結果

サンプル04

    <!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:"alert" });
                }, true);
            }
            // --></script>
            <title>LITBoxサンプル</title>
        </head>
        <body>
        <h1>LITBoxサンプル</h1>
            <div>
                <a href="#" id="openWin">アラートダイアログを表示</a>
            </div>
        </body>
    </html>

アラートダイアログも通常のウィンドウと同様のオプションを指定することができます。サンプル05では横幅200ピクセル、縦幅100ピクセルでアラートダイアログを表示します。

サンプル05の実行結果

サンプル05

    <!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:"alert", width:200, height:100 });
                }, true);
            }
            // --></script>
            <title>LITBoxサンプル</title>
        </head>
        <body>
        <h1>LITBoxサンプル</h1>
            <div>
                <a href="#" id="openWin">アラートダイアログを表示</a>
            </div>
        </body>
    </html>

多くの場合、アラートウィンドウはドラッグしたりリサイズしたりできないようになっています。サンプル06では、オプションを指定し、アラートダイアログのドラッグやリサイズを行えないようにしています。

サンプル06の実行結果

サンプル06

    <!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:"alert", width:200, height:100,
                        draggable:false, resizable:false });
                }, true);
            }
            // --></script>
            <title>LITBoxサンプル</title>
        </head>
        <body>
        <h1>LITBoxサンプル</h1>
            <div>
                <a href="#" id="openWin">アラートダイアログを表示</a>
            </div>
        </body>
    </html>

また、アラートダイアログで表示する文字列はテキストだけでなくHTMLタグを含むことができます。

サンプル07の実行結果

サンプル07

    <!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(){
                    var htmlStr = '<img src="images/icon.gif"><br>';
                    htmlStr += "よく内容を確認してください";
                    new LITBox(htmlStr, {
                        type:"alert", width:200, height:100,
                        draggable:false, resizable:false });
                }, true);
            }
            // --></script>
            <title>LITBoxサンプル</title>
        </head>
        <body>
        <h1>LITBoxサンプル</h1>
            <div>
                <a href="#" id="openWin">アラートダイアログを表示</a>
            </div>
        </body>
    </html>