js+css实现简洁消息提醒弹出层效果代码-html代码-BFW代码库

代码语言：html

所属分类：弹出层

代码描述：js+css实现简洁消息提醒弹出层效果代码

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

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

<head>
  <meta charset="UTF-8">

  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/iconoir.min.css">
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Oxygen:wght@700&family=Work+Sans:wght@300;500&display=swap");

body {
	font-family: "Work Sans", sans-serif !important;
	background-color: #f2f8ff;
	color: #333;
}

.notification-area {
	position: fixed;
	top: 10px;
	padding: 10px;
	right: 10px;
	width: 350px;
	z-index: 1000;
	max-height: 80%;
	overflow-y: auto;
}

.notification-item {
	backdrop-filter: blur(7px);
	background-color: rgb(66 66 69/70%);
	box-shadow: inset 0 0 1px rgb(232 232 237/11%);
	color: rgb(245, 245, 247);
	display: flex;
	will-change: transform;
	z-index: 1;
	transition: linear 250ms;
	border-radius: 7px;
	padding: 15px;
	margin-bottom: 10px;
	font-family: "Work Sans", sans-serif !important;
	align-items: center;
}

.notification-item[data-type="banner"]:hover {
	opacity: 0.9; /* Slight interactive effect on hover for banners */
}

.notification-title {
	font-size: 14px;
	font-weight: bold;
	margin-right: 8px;
	margin-bottom: 4px;
}

.notification-body {
	font-size: 12px;
	opacity: 0.8;
}

.notification-options {
	cursor: pointer;
	user-select: none;
	font-size: 12px;
	color: rgb(245, 245, 247);
	margin-left: auto;
}

.notification-options:hover {
	text-decoration: underline;
}

/* Custom scrollbar for the notification area */
.notification-area::-webkit-scrollbar {
	width: 6px;
}

.notification-app-name {
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase; /* Ensures the app name is in small caps */
	color: #aaa; /* Lighter text color for less emphasis */
	margin-bottom: 4px; /* Spacing between app name and title */
}

.notification-area::-webkit-scrollbar-thumb {
	background-color: #c1c1c1;
	border-radius: 4px;
}

.notification-area::-webkit-scrollbar-track {
	background: transparent;
}

.notification-item:hover .notification-close {
	visibility: visible;
}

.notification-close {
	position: absolute;
	top: -7.5px;
	left: -7.5px;
	cursor: pointer;
	background: rgb(118 120 124);
	visibility: hidden;
	border-radius: 50%;
	font-size: 14px;
	padding: 3px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.notification-icon {
	display: flex;
	align-items: center;
	font-size: 20px;
	margin-right: 12px;
}

.text-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.footer {
	position: fixed;
	bottom: 10px;
	right: 10px;
	color: black;
	font-size: 12px;
	text-align: right;
	font-family: monospace;
}

.footer a {
	color: black;
	text-decoration: none;
}
</style>

  
</head>

<body translate="no">
  <div id="notification-area" class="notification-area"></div>

<div class="footer">
    Made with 
</div>
  
      <script>
function showNotification(
	application,
	title,
	body,
	type = "banner",
	iconClass
) {
	const notificationArea = document.getElementById("notification-area");
	const notificationItem = document.createElement("div");
	notificationItem.className = "notification-item";
	notificationItem.dataset.type = type;

	if (notificationArea.children.length >= 5) {
		notificationArea.removeChild(notificationArea.firstChild);
	}

	const iconElement = document.createElement("i");
	iconElement.className = `notification-icon ${iconClass}`;
	notificationItem.appendChild(iconElement);

	const textContainer = document.createElement("div");

	const appNameLabel = document.createElement("div");
	appNameLabel.className = "notification-app-name";
	appNameLabel.textContent = application.toUpperCase();
	textContainer.appendChild(appNameLabel);

	const notificationTitle = document.createElement("div");
	notificationTitle.className = "notification-title";
	notificationTitle.textContent = title;

	const notificationBody = document.createElement("div");
	notificationBody.className = "notification-body";
	notificationBody.textContent = body;

	textContainer.appendChild(notificationTitle);
	textContainer.appendChild(notificationBody);

	notificationItem.appendChild(textContainer);

	if (type === "alert") {
		const optionsButton = document.createElement("div");
		optionsButton.className = "notification-options";
		optionsButton.textContent = "Options";
		notificationItem.appendChild(optionsButton);
	} else {
		setTimeout(() => {
			try {
				notificationArea.removeChild(notificationItem);
				updateNotificationCount(false);
			} catch (error) {}
		}, 5000);
	}

	notificationArea.appendChild(notificationItem);
	updateNotificationCount(true);

	const closeButton = document.createElement("div");
	closeButton.className = "notification-close iconoir-xmark";
.........完整代码请登录后点击上方下载按钮下载查看