原生js实现小巧的右侧底部通知弹出层代码-html代码-BFW代码库

原生js实现小巧的右侧底部通知弹出层代码

代码语言：html

所属分类：弹出层

代码描述：原生js实现小巧的右侧底部通知弹出层代码

下面为部分代码预览，完整代码请点击下载或在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(#345, rgb(20, 25, 30));
	height: 100vh;
	margin: 0 auto;
}
.btn {
	padding: 8px;
	width: 140px;
	margin-bottom: 5px;
	border-radius: 5px;
	cursor: pointer;
	border: 2px solid rgba(0, 0, 0, 0.5);
}
.btn:hover {
	opacity: 0.8;
}
.alertBtn {
	background: lightcoral;
}
.infoBtn {
	background: lightblue;
}
.successBtn {
	background: lightgreen;
}
.errorBtn {
	background: firebrick;
}
</style>


  
</head>

<body translate="no">
  <button class="btn alertBtn" title="createToaster({type: 'alert', message: 'Ahhhhh! PANIC! Something is dreadfully wrong!', time: 4000}"><b>Alert</b> Example</button>
<br/>
<button class="btn infoBtn" title="createToaster({type: 'info', message: `Here's some information for you to use or not use as you see fit`}"><b>Info</b> Example</button>
</br>
<button class="btn successBtn" title="createToaster({type: 'success', message: 'You know that thing you were trying to do? Yeah, totally succeeded ✊'}"><b>Success</b> Example</button>
</br>
<button class="btn errorBtn" title="createToaster({type: 'error', message: `You can't do that... But you already knew that, didn't ya?`}"><b>Error</b> Example</button>
</br>
<button class="btn longBtn" title="createToaster({message: `This message is really long. In terms of longness, I'd have to say it is really really really really really really really really really really really long`, time: 10000});
}">Long Example</button>
  
      <script>
// just need this one function
function createToaster(properties) {const defaultProperties = { type: 'info', background: '#ADD8E6', characterLimit: 100, color: '#000', icon: false, message: 'message', time: 5000, title: '', transition: 250, width: 300, zIndex: 99999 };const a = Object.assign(defaultProperties, properties);a.shortMessage = a.message.trim();if (a.message.length > a.characterLimit) {a.shortMessage = a.message.slice(0, a.characterLimit) + '...';a.title = ` title="${a.message}"`;}const cases = { alert: { icon: `<circle cx="12"cy="12"r="10"/><line x1="12"y1="8"x2="12"y2="12"/><line x1="12"y1="16"x2="12.01"y2="16"/>`, background: '#f08080' }, error: { icon: `<circle cx="12"cy="12"r="10"/><line x1="15"y1="9"x2="9"y2="15"/><line x1="9"y1="9"x2="15"y2="15"/>`, background: '#b22222', color: '#fff' }, success: { icon: `<circle cx="12"cy="12"r="10"/><path d="M17 9L10.5 16.01 7 13.01"/>`, background: '#90ee90' }, info: { icon: `<circle cx="12"cy="12"r="10"/><line x1="12"y1="16"x2="12"y2="12"/><line x1="12"y1="8"x2="12.01"y2="8"/>`, background: '#ADD8E6' } };const type = a.type.toLowerCase();const selectedCase = cases[type] || cases.info;a.icon = selectedCase.icon;a.background = selectedCase.background;a.color = selectedCase.color || '#000';const alert = `<div class="alertContainer${' ' + a.type}" style="background:${a.background};position:relative;overflow:hidden;display:flex.........完整代码请登录后点击上方下载按钮下载查看