jquery响应式自动关闭的消息通知栏插件

使用方法

$(function() {
  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;
  }
  var toast = function(text, time) {
    var appearTime = time ? time : 5000;
    var $toastDom = createToastDom(text);

    toastInstance.push($toastDom);
    $toastFrame.append($toastDom);
    $('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() {
      var index = toastInstance.indexOf($toastDom);
      if (index !== -1) {
        toastInstance.splice(index, 1);
      }
      $toastDom.remove();
      if (!toastInstance.length) {
        $toastFrame.remove();
      }
    });
  };

  var testCount = 1;
  $('.test-button').on('click', function() {
    toast('弹出层通知栏 ' + testCount, 5000);
    testCount++;
  });
});