トースト焼けました

ウィンドウ下端から出てくる通知メッセージを作成してみます

interface ToasterOptions {
    timeoutSec?: number;  // 閉じるまでの秒数
    top?: boolean;　　　　// 上から
    float?: boolean;　　　// 浮かせて表示
}

namespace Toaster {
    "use strict";

    let _timeoutHandle = 0;

	/*
	 * オープン
	 */
    export function open(messages: string | JQuery, options?: ToasterOptions) {
        close();
        if (!messages) {
            return;
        }

        let cls = "ui-toaster";
        if (options && options.top) {
            cls += " top";
        }
        if (options && options.float) {
            cls += " float";
        }

        let content = "";
        content += "<div class='" + cls + "'>";
        content += " <div>";
        content += " </div>";
        content += "</div>";
        let toast = $(content);

        toast.children("div").append(messages);

        // クリックして非表示
        toast.off("click").on("click", function (event: Event) {
            close();
        });
        // 自動非表示
        let autoHideSec = 0;
        if (options && options.timeoutSec && options.timeoutSec > 0) {
            autoHideSec = options.timeoutSec;
        }
        if (autoHideSec > 0) {
            _timeoutHandle = setTimeout(
                function () {
                    close();
                }
                , autoHideSec * 1000);
        }
        // 表示
        $("body").append(toast);
        toast.slideDown();
    }

    /*
     * クローズ
     */
    export function close() {
        if (_timeoutHandle) {
            clearTimeout(_timeoutHandle);
            _timeoutHandle = 0;
        }

        let toast = $(".ui-toaster:visible");
        if (toast) {
            toast.slideUp(500, function () {
                toast.remove();
            });
        } else {
            $(".ui-toaster").remove();
        }
    }
}

CSS

/*
  Toaster
*/
div.ui-toaster {
  display: none;
  position: fixed;
  top: auto;
  bottom: 0;
  border: none;
  width: 100%;
  text-align: center;
  z-index: 1003;
  background-color: rgba(0,0,0,0.5);
  color: white;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

  div.ui-toaster.float {
    width: auto;
    left: 50%;
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin-right: -50%;
    bottom: 1em;
  }

  div.ui-toaster.top {
    top: 0;
    bottom: auto;
  }

    div.ui-toaster.top.float {
      top: 1em;
    }

  div.ui-toaster > div {
    padding: 1em;
    display: inline-block;
  }

クリックすると閉じます
表示する時は一旦全て閉じます

使い方です

  // 下から浮かせて表示、３秒後に閉じる
  let content = "<p>焼けました</p><p>焼けました</p>";
  Toaster.open(content, { timeoutSec: 3, float: true });
 
  // 上から浮かせて表示
  let content = "<p>焼けました</p>";
  Toaster.open(content, { top: true, float: true });

  // 下から全幅で表示、３秒後に閉じる
  let content = "<p>焼けました</p><p>焼けました</p>";
  Toaster.open(content, { timeoutSec: 3 });

  // 上から全幅で表示
  let content = "<p>焼けました</p>";
  Toaster.open(content, { top: true });