创建简单的Toast通知并将其从上到下连续链接

Question

我正在尝试创建Toast通知，在大多数情况下，我的代码运行良好。但是，我正在努力将吐司面包放置在页面中所有其他内容的顶部，以便吐司＃1出现在页面顶部中的所有内容的顶部，吐司＃2出现在页面中所有内容的顶部，但将堆积在吐司下面＃1等

这是我的代码：

$(document).ready(function() {
  $("#btnSuccess").click(function() {
    createSuccessToast("everything is fine");
  });

  $("#btnError").click(function() {
    createErrorToast("something went wrong");
  });
});

function createSuccessToast(toastMessage) {
  createToast(true, toastMessage);
}

function createErrorToast(toastMessage) {
  createToast(false, toastMessage);
}

function createToast(isSuccess, toastMessage) {
  var toastContainer = createToastContainer(isSuccess);
  createToastHeader(toastContainer, isSuccess);
  createToastContent(toastContainer, toastMessage);
  initToast(toastContainer);
  destroyToast(toastContainer);
}

function createToastContainer(isSuccess) {
  var toastContainer = $("<div></div>");
  toastContainer.addClass("toastContainer");
  if (isSuccess) {
    toastContainer.addClass("toastContainerSuccess");
  } else {
    toastContainer.addClass("toastContainerError");
  }
  return toastContainer;
}

function createToastHeader(toastContainer, isSuccess) {
  var toastHeader = $("<div></div>");
  toastHeader.addClass("toastHeader");
  toastHeader.html(isSuccess ? "Success" : "Error");
  toastContainer.append(toastHeader);
}

function createToastContent(toastContainer, toastMessage) {
  var toastContent = $("<div></div>");
  toastContent.addClass("toastContent");
  toastContent.html(toastMessage);
  toastContainer.append(toastContent);
}

function initToast(toastContainer) {
  toastContainer.hide(function() {
    $(document.body).append(toastContainer);
    toastContainer.fadeIn(500);
  });
}

function destroyToast(toastContainer) {
  setTimeout(function() {
    toastContainer.fadeOut(500, function() {
      toastContainer.remove();
    });
  }, 5000);
}

.toastContainer {
  margin-top: 10px;
  border-radius: 5px;
  font-weight: bold;
  padding: 10px;
  color: #ffffff;
}

.toastContainerSuccess {
  background-color: #99ff33;
}

.toastContainerError {
  background-color: #ff1a1a;
}

.toastHeader {}

.toastContent {
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btnSuccess">
Success
</button>

<button id="btnError">
Error
</button>

为了达到我想要的结果，我添加了2个CSS属性到.toastContainer：

1. position: absolute;
2. z-index: 1;

但是，所有吐司都会在页面上的完全相同的位置生成，因此，如果有多个吐司，则只有最新的吐司才可见。

Answer 1

你应该追加到祝酒词是一个容器元素position: absolute; z-index: 1，而不是（因为如果多个元素position: absolute，它们具有相同的顶部/左位置，它们将出现在另一个上面，看到这个）：

$(document).ready(function() {
  $("#btnSuccess").click(function() {
    createSuccessToast("everything is fine");
  });

  $("#btnError").click(function() {
    createErrorToast("something went wrong");
  });
});

function createSuccessToast(toastMessage) {
  createToast(true, toastMessage);
}

function createErrorToast(toastMessage) {
  createToast(false, toastMessage);
}

function createToast(isSuccess, toastMessage) {
  var toastContainer = createToastContainer(isSuccess);
  createToastHeader(toastContainer, isSuccess);
  createToastContent(toastContainer, toastMessage);
  initToast(toastContainer);
  destroyToast(toastContainer);
}

function createToastContainer(isSuccess) {
  var toastContainer = $("<div></div>");
  toastContainer.addClass("toastContainer");
  if (isSuccess) {
    toastContainer.addClass("toastContainerSuccess");
  } else {
    toastContainer.addClass("toastContainerError");
  }
  return toastContainer;
}

function createToastHeader(toastContainer, isSuccess) {
  var toastHeader = $("<div></div>");
  toastHeader.addClass("toastHeader");
  toastHeader.html(isSuccess ? "Success" : "Error");
  toastContainer.append(toastHeader);
}

function createToastContent(toastContainer, toastMessage) {
  var toastContent = $("<div></div>");
  toastContent.addClass("toastContent");
  toastContent.html(toastMessage);
  toastContainer.append(toastContent);
}

function initToast(toastContainer) {
  toastContainer.hide(function() {
    $("#toastsContainer").append(toastContainer);
    toastContainer.fadeIn(500);
  });
}

function destroyToast(toastContainer) {
  setTimeout(function() {
    toastContainer.fadeOut(500, function() {
      toastContainer.remove();
    });
  }, 5000);
}

#toastsContainer {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
}

.toastContainer {
  margin-top: 10px;
  border-radius: 5px;
  font-weight: bold;
  padding: 10px;
  color: #ffffff;
position: relative;
z-index: 1;
}

.toastContainerSuccess {
  background-color: #99ff33;
}

.toastContainerError {
  background-color: #ff1a1a;
}

.toastHeader {}

.toastContent {
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btnSuccess">
Success
</button>

<button id="btnError">
Error
</button>

<div id="toastsContainer"></div>