Floating Message Function

ログインフォームやメールフォームからの送信時等に、エラーメッセージや確認メッセージを表示するための JavaScript Function。

CSSの調整でそのままスマートフォンなどにも対応可能。.floatingMsgにテキストがある場合のみ表示されます。fadeIn, fadeOutはスクリプト側で調整可能。通常、メッセージ内容はページにより違う、あるいは送信データと結果により違う事が予想されるため、PHPやPerlなどと組み合わせて使うケースが多い。
サイト内の各ページでincludeするファイル（例えばfooter.php等）の</body>の直前などに入れ、サイトレイアウトに影響しないように使用するのが良い。

Message Message Message Message.

HTML

PHP

CSS

JavaScript

<body>
  :
<p class="floatingMsg">Message Message Message Message.</p>
</body>

<body>
  :
<p class="floatingMsg"><?php if (!empty($msg)) echo $msg; ?></p>
</body>

/* Floating Message */
.floatingMsg {
    width: 90%;
    height: auto;
    margin: 20% auto;
    padding: 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 11050;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(248, 182, 45, 0.8);
    display: none;
    color: #2C9DD7;
    line-height: 200%;
    font-size: 110%;
    border-radius: 4px;
}

$(function(){
    floatingMsg('.floatingMsg');
});

/* Floating Message Function */
var floatingMsg = function (target) {
    target = target || '.floatingMsg';
    if ($(target).text()) {
        $(target).fadeIn(300);
        setTimeout(function () { $(target).fadeOut(500); }, 3000);
    }
};