个人中心
gpt4 book ai didi

javascript - 创建简单的 toast 通知并将它们从上到下连续链接

转载 作者：行者123 更新时间：2023-11-28 05:14:39 25 4
gpt4 key购买 nike

<分区>

我正在尝试创建 toast 通知，在大多数情况下，我的代码运行良好。但是，我正在努力将我的 toast 放在页面中其他所有内容的顶部，以便 toast #1 出现在页面顶部的所有内容之上， toast #2 出现在所有内容之上，但将堆叠在 toast 下#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>

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

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

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

25 4 0
文章推荐： php - 用 PHP 替换图像标签周围的链接
文章推荐： c++ - QListWidget的QT C++ SelectedIndex
文章推荐： javascript - 如何在$location.path之后的其他页面上使用 Angular js中的 View ？
文章推荐： c++ - 命令行上的 vcpkg 设置错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com