js实现弹出提示通知消息效果代码-html代码-BFW代码库

js实现弹出提示通知消息效果代码

代码语言：html

所属分类：弹出层

代码描述：js实现弹出提示通知消息效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: system-ui, sans-serif;
}

.wrapper {
  display: grid;
  gap: 2rem;
  place-items: center;
  place-content: center;
  min-height: 100vh;
}

/* Prep code */
.container {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  place-content: center;
  justify-content: center;
  background-color: #fffffe;
}

button {
  font: inherit;
  border: none;
  background-color: white;
  font-size: 2.5rem;
  padding: .3em 1em;
  cursor: pointer;
  position: relative;
  transition: all 250ms cubic-bezier(0.99,-0.14, 0.05, 1.07);
}

button:is(:hover, :focus){
  transform: translate(10px, 10px);
  box-shadow: 0px 0px #00214d;
}

.success {
  background-color: hsl(171 100% 46.1%);
  color: hsl(171 100% 13.1%);
  box-shadow: 10px 10px hsl(171 100% 13.1%);
}

.warning {
  background-color: hsl(350 100% 66.5%);
  color: hsl(350 100% 13.5%);
  box-shadow: 10px 10px hsl(350 100% 13.5%);
}

.info {
  background-color: hsl(51 97.8% 65.1%);
  color: hsl(51 97.8% 12.1%);
  box-shadow: 10px 10px hsl(51 97.8% 12.1%);
}
</style>



</head>

<body >
  <div class="wrapper">

  <div class="container">
  <button class="success" data-message="👊 You got this, kid! 👊">Submit</button>
  <button class="warning">Delete</button>
  <button class="info">Agree to Terms</button>
  </div>
</div>

  
      <script >
const success = document.querySelector('.success');
const warning = document.querySelector('.warning');
const info = document.querySelector('.info');

let toastContainer;

function generateToast({
  message,
  background = '#00214d',
  color = '#fffff.........完整代码请登录后点击上方下载按钮下载查看