0

jQueryを使ったおしゃれなメッセージボックス

タイトルが非常につけにくかったのですが、フォームなどで送信が完了した時にでてくる「送信しました」みたいなメッセージをちょっとおしゃれに出す方法です。(gmailの出し方に似てるけどちょっと違う)
これによって簡単なフォームでは、完了ページをつくる必要がなくなります。

とりあえず、これがサンプル

適当なコメントを書いて送信ボタンを押すとページ右上に「送信しました」のメッセージがでてきます。
ここでは、ajaxを使って送信していますが、そうでない場合はコードを少し変える必要があります。

たったこれだけのものです。
あまりWEBで見かけなかったのでおいておきます。
ソースは下記の通り

<html>
<head>
<title>完了ページ</title>
<script type="text/javascript" src="./jquery.js" mce_src="./jquery.js"></script>
<script>
clearTimeout();
window.onload = function(){
$("#msg").hide();
}
function test (value) {
$("div#area").load('test.php', {
name: value
});
document.form1.area.value="";
$("#msg").fadeIn("slow");
var id = setTimeout(function() { $("#msg").fadeOut("slow"); }, 2000);
return false;
}
</script></style>
</head><body>
<div id="msg" style="background-color:#000; color:#fff; width:100px; position:absolute;
right:0px; top:0px; text-align:center;">
送信しました
</div>
<form name="form1">
<textarea name="area" rows="6" cols="40"></textarea>
<input type="button" value="送信" onclick="return test(form1.area.value);">
</form>
<div id="area"></div>
</body>
</html>
>

大阪のWEB屋です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です