一定時間後にダイアログを閉じる

ModalBoxではModalbox.hide()を使って表示されているダイアログを閉じることができます。タイマーと併用すると一定時間経過したら表示されているダイアログを消すことができます。サンプル06ではクリックされるとダイアログを表示し5秒経過すると自動的に消えます。

サンプル06の実行結果

サンプル06

<!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 : "閉じる"
                });
                setTimeout("Modalbox.hide()", 5000);
                return false;
            }
        }
        // --></script>
    </head>
    <body>
    <h1>ModalBox サンプル</h1>
        <div>
            <a href="about.html" id="mbox1">ダイアログにabout.htmlファイルを表示</a>
        </div>
    </body>
</html>

サンプル07ではページが表示された直後にダイアログを表示し5秒経過すると自動的に消えます。

サンプル07の実行結果

サンプル07

<!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(){
            Modalbox.show("about.html",
            {
                title : "ModalBoxについて",
                width:400,
                height:200,
                loadingString : "読み込み中...",
                closeString : "閉じる"
            });
            setTimeout("Modalbox.hide()", 5000);
            return false;
        }
        // --></script>
    </head>
    <body>
    <h1>ModalBox サンプル</h1>
    </body>
</html>

5秒経過したら消すのではなく、ユーザーがボタンをクリックしてダイアログを閉じることも可能です。この場合は、表示先のHTMLファイル内にModalbox.hide()を指定します。サンプル08ではダイアログ内に表示された「閉じる」ボタンをクリックしてもダイアログを閉じることができます。

サンプル08

(表示先のHTMLファイル。表示元はサンプル07と同じ) 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <body>
    <h1>ModalBox サンプル</h1>
        <p>
            ページが読み込まれたとき、ダイアログを表示することができます。<br>
            <br>
            <input type="button" value="閉じる" onClick="Modalbox.hide()">
        </p>
    </body>
</html>