javascript - 向下滚动后在右下角显示吐司(引导程序 5)
问题描述
使用类bottom-0 end-0
(至少我使用它们的方式)并没有达到我期望的结果。我想我不了解关于 CSS 和定位的一些非常基本的东西。
这是代码的最小独立示例:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script type="text/javascript">
/**
* Usage: showToast('hey!', 'success');
*/
function showToast(toastBody, color) {
var delay = 3000;
var html =
`<div class="toast align-items-center text-white bg-${color} border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
${toastBody}
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>`;
var toastElement = htmlToElement(html);
var toastConainerElement = document.getElementById("toast-container");
toastConainerElement.appendChild(toastElement);
var toast = new bootstrap.Toast(toastElement, {delay:delay, animation:true});
toast.show();
setTimeout(() => toastElement.remove(), delay+3000); // let a certain margin to allow the "hiding toast animation"
}
/**
* @param {String} HTML representing a single element
* @return {Element}
*/
function htmlToElement(html) {
var template = document.createElement('template');
html = html.trim(); // Never return a text node of whitespace as the result
template.innerHTML = html;
return template.content.firstChild;
}
</script>
</head>
<body>
<h1>Toast test</h1>
<p style="margin-bottom:1200px;">
Scroll down to click the test button ...
</p>
<button onclick="showToast('If I am not at the bottom, then something went wrong...', 'danger')" class="btn btn-primary">
Click me and the toast should appear at my right
</button>
<div aria-live="polite" aria-atomic="true">
<div class="toast-container position-absolute bottom-0 end-0 p-3" id="toast-container">
<!-- toasts are created dynamically -->
</div>
</div>
</body>
</html>
解决方案
我找到了似乎是答案:
<div class="toast-container position-absolute
需要改为<div class="toast-container position-fixed
那就是:我使用absolute
而不是fixed
,因为我只是盲目地复制粘贴文档中的示例。
推荐阅读
- jquery - Spring + Ajax Post 数据文本
- scala - 从scala spark中的无序数据中提取列
- amazon-web-services - EC2 实例在附加卷后启动和停止
- c# - 使用依赖属性 WPF 按钮绑定字符串而不是 ImageSource
- c++ - 在 C++ 中具有键值对:
作为关键 作为价值 - javascript - 如何为 AWS mp4 目标链接创建下载链接
- excel - Excel 自动递增设置值并重置为初始值
- python - 如何以 d/m/y 格式从 python 中的 csv 导入日期列
- javascript - 使用 Laravel 运行的 Javascript 中出现意外的标识符
- php - 如何更新 WordPress wp_usermeta?