さまざまな種類のメッセージをフロート表示できるJavaScript「jQuery.msgBox()」

ボタンを押した時にメッセージをライトボックスのように閲覧者に知らせてあげると伝わりやすいと思います。
jQuery.msgBox()は、いろいろなパターンでこれを実現できます。

使用方法

jQuery.msgBox()からファイル一式をダウンロード。


<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.msgBox.js"></script>
<script>
      function msg() {
            $.msgBox({
                title: "あーあー", //ボックスのタイトル
                content: "さわっちゃだめ！",  //ボックスの内容
                type: "error", //タイプ（'alert','confirm','error','info','prompt'）
                buttons: [{ value: "閉じる"}], //閉じるボタン
                opacity: 0.9, //背景の透過
                afterShow: function (result) { alert("あらーと！"); } //ボックスを表示した時の
            });
        }
</script>
<link href="msgBoxLight.css" rel="stylesheet" type="text/css" />

※画像パスはImageでjs、css内指定されているので、環境により変更ください。
上記を記述したらボタンにonClickを記述すれば完成です。


 <input type="button" value="msg" onClick="msg();"/>

サンプル

Javascriptサンプルページ一覧

skuare.net