js+css实现右侧底部通知栏弹出通知效果代码-html代码-BFW代码库

js+css实现右侧底部通知栏弹出通知效果代码

代码语言：html

所属分类：弹出层

代码描述：js+css实现右侧底部通知栏弹出通知效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
body {
background: linear-gradient(to right, #dddde1, skyblue);
	font-family: sans-serif; 
}

.toasterHolder {
	width: 100px;
	position: fixed;
	bottom: 0%;
	right: 0%;
	z-index: 100;
}
button {
	cursor: pointer;
	position: fixed;
	top: 50%;
	left: 10px;
	transform: translate(0%,-50%);
	background: tan;
	border: 5px solid #bb7b3e;
	border-radius: 8px;
	padding: 5px;
	box-shadow: 0px 5px 10px #000;
	font-family: monospace;
}
button:hover {
	box-shadow: 0px 3px 5px #000;
	filter: brightness(80%);
}
button:active {
	box-shadow: 0px 1px 2px #000;
	filter: brightness(70%);
}
.toastMessage {
/* 	style the message yourself! */
}
</style>


  
  
</head>

<body translate="no">
  <div class="toasterHolder"></div>
<button class="newMsg">New<br/>Toaster<br/>Message!</button>
  
      <script >
function toastMe(properties) {
  const defaultProperties = {
    element: document.querySelector('.toasterHolder'),
    toastTime: 2000,
    toastColor: null,
    crustColor: null,
    messageTime: 4000,
    messageWidth: '300%',
    message: 'mmmmm... nice toasty message 😋' };

  const t = Object.assign(defaultProperties, properties);
  const randInt = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };
  let burnHue = randInt(-40, 10);
  let toastColor = !t.toastColor ? `rgb(${210 + burnHue}, ${180 + burnHue}, ${140 + burnHue})` : t.toastColor;
  let crustColor = !t.crustColor ? `rgb(${210 + burnHue - 50}, ${180 + burnHue - 50}, ${140 + burnHue - 50})` : t.crustColor;
  let elt = t.element;
  let toasterMessageHolder = document.createElement('div');
  toasterMessageHolder.style.height = '100px';
  toas.........完整代码请登录后点击上方下载按钮下载查看