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

さまざまな種類のメッセージをフロート表示できる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「jQuery.msgBox()」サンプル

sponsors

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

記事作成:
記事URL:

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