ミギムキ

[jQuery] 画面下からサッと出てくる通知用ポップアップを設置したい

公開日:2018/11/04 更新日:2018/11/05

やりたいこと

ユーザーが何か操作をしたとき、「あなたの操作を受け付けました」ということをユーザーに返答することはとても大切です
そうでないと、利用者側は「ちゃんと操作を完了できたのだろうか？」と疑心暗鬼になってしまいます
この応答するという手続きのことを、デザイン界隈ではフィードバックというそうです
無作法に見えるヤンキーの間にも「なんだてめえ」→「なんだこら」というアクション→フィードバックの手続きが踏まれることで喧嘩の売買が成立します
無機質なサイト上でも、むしろ無機質なサイト上だからこそ、このアクションに適切なフィードバックは用意されているか、ということを留意したいものです
今回は、ボタン操作などのフィードバックとしてオーソドックスな、ページ下部からポップアップするテキストボックスの実装方法をご紹介します

サンプルコード

html

<button>ボタン</button>

<p class="popup">ボタンが押されました</p>

CSS

.popup {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    transform: translateY(100%);
    padding: 1em;
    margin: 0px;
    background-color: #3388dd;
    color: #fff;
    text-align: center;
    opacity: 0;
    transition: 0.5s;
}
.popup.js_active {
    transform: translateY(0%);
    opacity: 1;
}

jQuery

jQuery(function($) {
    $('button').click(function() {
        $('.popup').addClass('js_active');
        setTimeout(function() {
            $('.popup').removeClass('js_active');
        }, 3000);
    });
    $('.popup').hover(function() {
        $(this).removeClass('js_active');
    });
});

仕組み、解説、補足など

ボタン操作を受けて「js_active」クラスを付与し、画面外に置いたテキストボックスを画面内に移動しています
併せて、3秒後に「js_active」クラスを外すタイマー処理を設定し、テキストボックスが自動消去されるようにしています
テキストボックスは、マウスオーバーしたときにも消去されます。フィードバックは大切ですが、その通知がユーザーのストレスにならないようなケアも心がけたいですね

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。