Bootstrapで横から出てくるポップアップメッセージを実装【Toast】

こんにちは、Noyです。

いろんなアプリでよく見かける、横から現れるポップアップメッセージを実装してみました。

動作

デモ

ソースコード

HTML

<div class="position-relative" aria-live="polite" aria-atomic="true">
    <div class="toast" data-delay="3000">
        <div class="toast-header text-white bg-success">
            <i class="fas fa-check-circle pr-1"></i>
            <strong class="mr-auto">Toast</strong>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
        <div class="toast-body">コメントの投稿に成功しました</div>
    </div>
</div>

<button class="btn btn-primary" onclick="showToast()">showToast</button>

CSS

.toast {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
    transform: translateX(300px); /* 位置を右にずらして隠す */
    transition: opacity 0.5s,transform 0.5s;
}

.toast-fadein {
    transform: translateX(0); /* 位置を最初の位置に戻す */
}

JavaScript

var showToast = function () {
  $(".toast").addClass("toast-fadein").toast("show");
}

仕組みは単純で、最初は「transform: translateX(300px);」で隠しておいて、表示するタイミングで「transform: translateX(0);」をかけることで右から出てくるように見せます。