我正在尝试使用Bootstrap 4创建 snackbar / toast版本。我从w3schools的此教程开始。
更新: 我曾试图为 Bootstrap 4 实现一个自定义 snackbar 或 toast,但是,现在这并不必要,因为如@Zim所说,Bootstrap 4从4.2版本开始包含了这个选项。
I(强调=全面披露) 创建了一个 jQuery 插件来方便使用 toast 组件,仓库可以在这里找到。其目的是通过 JavaScript 快速调用 toast。
Toast
$.toast({
title: 'Toast',
subtitle: '11 mins ago',
content: 'Hello, world! This is a toast message.',
type: 'info',
delay: 5000
});
Snack
$.toast({
title: 'A small bitesize snack, not a toast!',
type: 'info',
delay: 5000
});
现场实例
(function(b){b.toast=function(a,h,g,l,k){b("#toast-container").length||(b("body").prepend('<div id="toast-container" aria-live="polite" aria-atomic="true"></div>'),b("#toast-container").append('<div id="toast-wrapper"></div>'));var c="",d="",e="text-muted",f="",m="object"===typeof a?a.title||"":a||"Notice!";h="object"===typeof a?a.subtitle||"":h||"";g="object"===typeof a?a.content||"":g||"";k="object"===typeof a?a.delay||3E3:k||3E3;switch("object"===typeof a?a.type||"":l||"info"){case "info":c="bg-info";
f=e=d="text-white";break;case "success":c="bg-success";f=e=d="text-white";break;case "warning":case "warn":c="bg-warning";f=e=d="text-white";break;case "error":case "danger":c="bg-danger",f=e=d="text-white"}a='<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="'+k+'">'+('<div class="toast-header '+c+" "+d+'">')+('<strong class="mr-auto">'+m+"</strong>");a+='<small class="'+e+'">'+h+"</small>";a+='<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">';
a+='<span aria-hidden="true" class="'+f+'">×</span>';a+="</button>";a+="</div>";""!==g&&(a+='<div class="toast-body">',a+=g,a+="</div>");a+="</div>";b("#toast-wrapper").append(a);b("#toast-wrapper .toast:last").toast("show")}})(jQuery);
const TYPES = ['info', 'warning', 'success', 'error'],
TITLES = {
'info': 'Notice!',
'success': 'Awesome!',
'warning': 'Watch Out!',
'error': 'Doh!'
},
CONTENT = {
'info': 'Hello, world! This is a toast message.',
'success': 'The action has been completed.',
'warning': 'It\'s all about to go wrong',
'error': 'It all went wrong.'
};
function show_random_toast()
{
let type = TYPES[Math.floor(Math.random() * TYPES.length)],
title = TITLES[type],
content = CONTENT[type];
$.toast({
title: title,
subtitle: '11 mins ago',
content: content,
type: type,
delay: 5000
});
}
function show_random_snack()
{
let type = TYPES[Math.floor(Math.random() * TYPES.length)],
content = CONTENT[type].replace('toast', 'snack');
$.toast({
title: content,
type: type,
delay: 5000
});
}
#toast-container {
position: sticky;
z-index: 1055;
top: 0
}
#toast-wrapper {
position: absolute;
top: 0;
right: 0;
margin: 5px
}
#toast-container > #toast-wrapper > .toast {
min-width: 150px
}
#toast-container > #toast-wrapper > .toast >.toast-header strong {
padding-right: 20px
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<button class="btn-block btn-primary" onclick="show_random_toast();">Show Random Toast</button>
<br>
<button class="btn-block btn-primary" onclick="show_random_snack();">Show Random Snack</button>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap 4.2现在包括Toast通知
以下是一个例子:
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="mr-auto">Title</strong>
<small>5 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Content... this is a toast message.
</div>
</div>
更多 Bootstrap Toast 布局/位置示例:
垂直堆叠:https://codeply.com/go/3ZvZa9b8Im
并排显示:https://codeply.com/go/GFMde2ritI
3x3 网格:https://codeply.com/go/lj8GTFjvuK
$(document).ready(function() {
//success toast
var options = {
autoClose: true,
progressBar: true,
enableSounds: true,
sounds: {
info: "https://res.cloudinary.com/dxfq3iotg/video/upload/v1557233294/info.mp3",
// path to sound for successfull message:
success: "https://res.cloudinary.com/dxfq3iotg/video/upload/v1557233524/success.mp3",
// path to sound for warn message:
warning: "https://res.cloudinary.com/dxfq3iotg/video/upload/v1557233563/warning.mp3",
// path to sound for error message:
error: "https://res.cloudinary.com/dxfq3iotg/video/upload/v1557233574/error.mp3",
},
};
var toast = new Toasty(options);
toast.configure(options);
$('#successtoast').click(function() {
toast.success("This toast notification with sound");
});
$('#infotoast').click(function() {
toast.info("This toast notification with sound");
});
$('#warningtoast').click(function() {
toast.warning("This toast notification with sound");
});
$('#errortoast').click(function() {
toast.error("This toast notification with sound");
});
});
.btn {
margin-right: 0.5rem !important
}
.btn {
font-size: 0.875rem;
line-height: 1;
font-weight: 400;
padding: .7rem 1.5rem;
border-radius: 0.1275rem
}
.container {
margin-top: 100px
}
.toast {
transition: 0.32s all ease-in-out
}
.toast-container--fade {
right: 0;
bottom: 0
}
.toast-container--fade .toast-wrapper {
display: inline-block
}
.toast.fade-init {
opacity: 0
}
.toast.fade-show {
opacity: 1
}
.toast.fade-hide {
opacity: 0
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1557232134/toasty.css" rel="stylesheet" />
<script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1557232134/toasty.js"></script>
<div class="page-content page-container" id="page-content">
<div class="padding">
<div class="row container d-flex justify-content-center"> <button type="button" id="successtoast" class="btn btn-success btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification success sound </button> <button type="button" id="infotoast" class="btn btn-info btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification info sound </button> <button type="button" id="warningtoast" class="btn btn-warning btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification warning sound </button> <button type="button" id="errortoast" class="btn btn-primary btn-icon-text"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification error sound</button> </div>
</div>
</div>
我不是JavaScript专家,但我成功地创建了一个小插件。只需将所有JS复制到您的项目中(在顶部!),然后调用displayNotification(message,color,time,hide)。
false
如果吐司不应消失(默认为true)Bootstrap版本5.1
// Notifications ===============================================================
var toast_id = 1;
function getContainer() {
var toast_container = document.getElementById('toast-container');
if (toast_container != null)
{
return toast_container;
}
toast_container = document.createElement("div");
toast_container.id = "toast-container";
toast_container.classList = "toast-container position-fixed bottom-0 end-0 p-3";
toast_container.setAttribute("style", "z-index: 11");
document.body.appendChild(toast_container);
return toast_container;
}
function createToast(color, color_text, id) {
var newDiv = document.createElement("div");
newDiv.classList.add('toast');
newDiv.classList.add(color);
newDiv.classList.add(color_text);
newDiv.id = "toast-"+id;
newDiv.setAttribute("role", "alert");
newDiv.setAttribute("aria-live", "assertive");
newDiv.setAttribute("aria-atomic", "true");
return newDiv;
}
function createSnack(message, id) {
var newDiv = document.createElement("div");
newDiv.classList.add("toast-body");
newDiv.classList.add("d-flex");
newDiv.appendChild(createMessage(message, id));
newDiv.appendChild(createCloseButton(id));
return newDiv;
}
function createMessage(message, id) {
var newDiv = document.createElement("div");
newDiv.id = "message-"+id;
newDiv.innerHTML = message;
return newDiv;
}
function createCloseButton(id) {
var newButton = document.createElement("button")
newButton.classList.add("btn-close");
newButton.classList.add("btn-close");
newButton.classList.add("btn-close-white");
newButton.classList.add("me-2");
newButton.classList.add("m-auto");
newButton.setAttribute("type", "button");
newButton.setAttribute("data-bs-dismiss", "toast");
newButton.setAttribute("aria-label", "Close");
return newButton;
}
function displayNotification(message, color, time, hide){
var color_text = 'text-white';
switch(color) {
case 'grey':
case 'secondary':
color = 'bg-secondary';
color_text = 'text-white';
break;
case 'green':
case 'success':
color = 'bg-success';
color_text = 'text-white';
break;
case 'red':
case 'danger':
color = 'bg-danger';
color_text = 'text-white';
break;
case 'warning':
case 'yellow':
color = 'bg-warning';
color_text = 'text-white';
break;
case 'white':
case 'light':
color = 'bg-light';
color_text = 'text-dark';
break;
default:
color = 'bg-primary';
color_text = 'text-white';
break;
};
if(time == null){
time = 2000;
}
if(hide == null){
hide = true;
}
var option =
{
delay: time,
autohide: hide
};
var toast_container = getContainer();
toast = createToast(color, color_text, toast_id);
toast_container.appendChild(toast);
toast.appendChild(createSnack(message, toast_id));
var toast = new bootstrap.Toast(toast, option);
toast.show();
toast_id = toast_id + 1;
}
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<button class="btn btn-primary" id="1">Primary</button>
<button class="btn btn-secondary" id="2">Secondary</button>
<button class="btn btn-success" id="3">Success</button>
<button class="btn btn-danger" id="4">Danger</button>
<button class="btn btn-warning" id="5">Warning</button>
<button class="btn btn-light" id="6">Light</button>
<script>
var button = document.getElementById("1");
button.addEventListener('click', function () {
displayNotification("Hello", "blue");
}, false );
var button = document.getElementById("2");
button.addEventListener('click', function () {
displayNotification("Hello", "secondary");
}, false );
var button = document.getElementById("3");
button.addEventListener('click', function () {
displayNotification("Hello", "success");
}, false );
var button = document.getElementById("4");
button.addEventListener('click', function () {
displayNotification("Hello", "danger");
}, false );
var button = document.getElementById("5");
button.addEventListener('click', function () {
displayNotification("Hello", "warning");
}, false );
var button = document.getElementById("6");
button.addEventListener('click', function () {
displayNotification("Hello", "light");
}, false );
</script>
<div class="container">
<h2 class="text-danger">Cool Snackbar/Toast demo</h2>
<div id="snackbar">
<div class="close"><i class="fas fa-times-circle"></i></div>
<div class="col-sm-6 col-xs-6 col-md-6">
<a hreflang="en-in" href="https://play.google.com/" target="_blank" >
<img src="google-play-store.png" alt="Google Play Store">
</a>
</div>
<div class="col-sm-6 col-xs-6 col-md-6 second">
<a hreflang="en-in" href="http://youtube.com/" target="_blank" >
<img src="youtube.png" alt="YouTube Link" >
</a>
</div>
<div class="clearfix"></div>
</div>
</div>
#snackbar {
visibility: hidden;
background-color: #FFFFFF;
text-align: center;
border-radius: 5px;
padding: 16px;
position: fixed;
z-index: 1;
bottom: 30px;
width:80%;
bottom: 30px;
box-shadow: 0px 0px 30px 20px grey;
}
#snackbar .close {
float:right;
color:#FF0000;
z-index: 1;
opacity: 0.6;
margin-top: -23px;
margin-right: -23px;
}
#snackbar .second {
border-left: 1px solid #FF0000
}
#snackbar img {
width:200px;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#snackbar.hide {
-webkit-animation: fadeout 0.5s 2.5s;
animation: fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
最后,创建您的JavaScript代码以实现#snackbar的显示和隐藏效果。
var x = document.getElementById("snackbar");
setTimeout(function () {
x.className = "show";
}, 3000);
setTimeout(function () {
x.className = x.className.replace("show", "hide");
}, 15000);
$("#snackbar .close").click(function () {
x.className = x.className.replace("show", "hide");
});
查看完整示例,请单击此网址 https://www.legendblogs.com/blog/how-to-create-a-snackbar-or-toast-bootstrap/121762
z-index
。它应该显示在除模态框以外的所有内容上方(它将显示在模态框覆盖层上方,但不会重叠模态框本身)。 - Script47show.bs.toast
或shown.bs.toast
并删除除当前显示的之外的所有内容。 - Script47pauseDelayOnHover
没有任何效果。我猜你需要将delayOrAutohide = 'data-autohide="false"';
这一行移到if
语句的else条件中。由于某种原因,我无法登录到GitHub并发布问题,而且我也不在意,因为它已经成为了微软的产品。 - AaA