JS Snackbar套件 實現Google網站的Notification Demo

by ShadowKao

HTML

<button id="btn">Click and Show Notification</button>

    <!--引用jQuery-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> 
    <!--自訂參數-->
    <script type="text/javascript">
        //宣告一個物件
        let MysnackbarOption = {

            actionText: "✕",  //關閉按鈕文字
            actionTextColor: '#fff', //關閉按鈕顏色 白色
            pos: 'bottom-center',//出現位置為畫面正下方  

            onActionClick: MySnackbarClose//當點擊關閉按鈕時 
        };

        function MySnackbarClose() {
            if (Snackbar.current)//防呆
            {
                //Snackbar.current 為 <div class="snackbar-container"></div>
                let sty = Snackbar.current.style;
                //由於snackbar.css有定義.snackbar-container的transition，所以下面兩行會有轉場動畫效果
                sty.bottom = "-100px"; //往下滑動
                sty.opacity = 0;//淡出消失 

            }
        }

        //改寫close function
        Snackbar.close = MySnackbarClose;


    </script>
    <script type="text/javascript">
        $(function () {
              
            //當click畫面上的button
            $("#btn").click(function () {
                //show notification
                Snackbar.show($.extend(true, MysnackbarOption,
                    { //寫下此頁面才會使用到的參數
                        text: "已儲存至資料庫",
                        //第二顆按鈕用法↓
                        showSecondButton: true, secondButtonText: "查看", secondButtonTextColor: "#64b5f6",
                        onSecondButtonClick: function (element) {
                            alert("you click 查看");;
                        }
                       
                    })
                );//end show
            });//end click
        });
        
         
    </script>

CSS

.snackbar-container {
    transition: all 500ms ease;
    transition-property: top, right, bottom, left, opacity;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    min-height: 14px;
    background-color: #070b0e;
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    line-height: 22px;
    padding: 18px 24px;
    bottom: -100px;
    top: -100px;
    opacity: 0;
    z-index: 9999;
}
  .snackbar-container .action {
    background: inherit;
    display: inline-block;
    border: none;
    font-size: inherit;
    text-transform: uppercase;
    color: #4caf50;
    margin: 0 0 0 24px;
    padding: 0;
    min-width: min-content;
    cursor: pointer; }

@media (min-width: 640px) {
  .snackbar-container {
    min-width: 288px;
    max-width: 568px;
    display: inline-flex;
    border-radius: 2px;
    margin: 24px; } }

@media (max-width: 640px) {
  .snackbar-container {
    left: 0;
    right: 0;
    width: 100%; } }

.snackbar-pos.bottom-center {
  top: auto !important;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0); }

.snackbar-pos.bottom-left {
  top: auto !important;
  bottom: 0;
  left: 0; }

.snackbar-pos.bottom-right {
  top: auto !important;
  bottom: 0;
  right: 0; }

.snackbar-pos.top-left {
  bottom: auto !important;
  top: 0;
  left: 0; }

.snackbar-pos.top-center {
  bottom: auto !important;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0); }

.snackbar-pos.top-right {
  bottom: auto !important;
  top: 0;
  right: 0; }

@media (max-width: 640px) {
  .snackbar-pos.bottom-center, .snackbar-pos.top-center {
    left: 0;
    transform: none; } }

JavaScript

/*!
 * Snackbar v0.1.10
 * http://polonel.com/Snackbar
 *
 * Copyright 2018 Chris Brame and other contributors
 * Released under the MIT license
 * https://github.com/polonel/Snackbar/blob/master/LICENSE
 */

(function(root, factory) {
    'use strict';

    if (typeof define === 'function' && define.amd) {
        define([], function() {
            return (root.Snackbar = factory());
        });
    } else if (typeof module === 'object' && module.exports) {
        module.exports = root.Snackbar = factory();
    } else {
        root.Snackbar = factory();
    }
})(this, function() {
    var Snackbar = {};

    Snackbar.current = null;
    var $defaults = {
        text: 'Default Text',
        textColor: '#FFFFFF',
        width: 'auto',
        showAction: true,
        actionText: 'Dismiss',
        actionTextColor: '#4CAF50',
        showSecondButton: false,
        secondButtonText: '',
        secondButtonTextColor: '#4CAF50',
        backgroundColor: '#323232',
        pos: 'bottom-left',
        duration: 5000,
        customClass: '',
        onActionClick: function(element) {
            element.style.opacity = 0;
        },
        onSecondButtonClick: function(element) {},
        onClose: function(element) {}
    };

    Snackbar.show = function($options) {
        var options = Extend(true, $defaults, $options);

        if (Snackbar.current) {
            Snackbar.current.style.opacity = 0;
            setTimeout(
                function() {
                    var $parent = this.parentElement;
                    if ($parent)
                    // possible null if too many/fast Snackbars
                        $parent.removeChild(this);
                }.bind(Snackbar.current),
                500
            );
        }

        Snackbar.snackbar = document.createElement('div');
        Snackbar.snackbar.className = 'snackbar-container ' + options.customClass;
        Snackbar.snackbar.style.width = options.width;
        var $p =...