jQueryでトースト通知の表示を実装する

<div class="toast__frame">
  <div class="toast">
    <p class="toast__text">テキスト1 テキスト1 テキスト1 テキスト1 テキスト1 テキスト1</p>
    <div class="toast__close"><span class="close-button"></span></div>
  </div>
</div>

.toast {
  position: relative;
  width: 100%;
  border-top: 1px solid #000;
  background-color: #fff;
  font-size: 20px;
}

.toast__frame {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100;
}

.toast__text {
  text-align: center;
  padding: 15px;
}

.toast__close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.close-button {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  background-color: #444;
  cursor: pointer;
  border-radius: 50%;
}
.close-button::before,
.close-button::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 10%;
  margin: -6% 0 0 -33%;
  background: #fff;
}
.close-button::before {
  transform: rotate(-45deg);
}
.close-button::after {
  transform: rotate(45deg);
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="script/script.js"></script>

$(function() {
  /** ①Toast本体 start */
  //　②トーストの表示中インスタンス
  var toastInstance = [];
  // ③トーストの大枠を作成
  $toastFrame = $('<div>', { class:'toast__frame' });

  // ④トースト要素の作成
  var createToastDom = function(content) {
    // ⑤トースト通知の要素を作成
    $toast = $('<div>', { class:'toast' });

    // ⑥テキストを作成
    $text = $('<p>', { class: 'toast__text', text: content });

    // ⑦閉じるボタンを作成
    $closeButton = $('<span>', { class:'close-button' });
    $close = $('<div>', { class:'toast__close' }).append($closeButton);

    // ⑧トースト要素にテキストと閉じるボタンを追加
    $toast.append($text, $close);
    return $toast;
  }

  /**
   * ⑨トーストを表示する
   * @param {String} text トーストで表示するテキスト
   * @param {Number | undefined} time 表示する時間
   */
  var toast = function(text, time) {
    // ⑩表示時間 (指定がなければデフォルト5秒)
    var appearTime = time ? time : 5000;
    // ⑪トースト要素の作成
    var $toastDom = createToastDom(text);

    // ⑫トーストの要素を保存
    toastInstance.push($toastDom);
    // ⑬トースト要素を枠内に追加
    $toastFrame.append($toastDom);
    // ⑭トーストをbodyに追加
    $('body').append($toastFrame);

    // ⑮一定時間表示後にトースト表示を消す
    setTimeout(function() {
      // ⑯トーストのインスタンスから消す
      var index = toastInstance.indexOf($toastDom);
      if (index !== -1) {
        toastInstance.splice(index, 1);
      }
      // ⑰トースト表示を消す
      $toastDom.remove();

      // ⑱通知がすべて消えていたらトーストの大枠を消す
      if (!toastInstance.length) {
        $toastFrame.remove();
      }
    }, appearTime);

    // ⑲閉じるボタンのクリックでトースト表示を消す
    $toastDom.find('.toast__close').on('click', function() {
      // 配列のindexを取得
      var index = toastInstance.indexOf($toastDom);
      if (index !== -1) {
        // 一致があればインスタンス配列から削除
        toastInstance.splice(index, 1);
      }
      // トースト表示を消す
      $toastDom.remove();

      // 通知がすべて消えていたらトーストの大枠を消す
      if (!toastInstance.length) {
        $toastFrame.remove();
      }
    });
  };
  /** Toast本体 end */

  /** トーストを表示する設定の例 */
  var testCount = 1;
  // ⑳テストボタンをクリックする度にトースト表示され、テキストがカウントアップします
  $('.test-button').on('click', function() {
    toast('トーストの表示です。 ' + testCount, 5000);
    testCount++;
  });
});