在Bootstrap 4中，Toast是不可见的，并且无法关闭
在Bootstrap 4中，Toast是一种轻量级的通知组件，用于在页面上显示临时的消息或提示。Toast组件在默认情况下是不可见的，并且无法手动关闭。
Toast组件的优势在于它可以以非侵入性的方式提供用户友好的提示，而不会打断用户的操作流程。它可以用于各种场景，例如显示成功或失败的操作结果、提醒用户进行某项操作、展示重要的系统通知等。
在Bootstrap 4中，要使用Toast组件，需要按照以下步骤进行操作：
- 在HTML文件中引入Bootstrap的CSS和JavaScript文件。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>- 创建一个Toast容器，并设置其id和样式。
<div id="myToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
<div class="toast-header">
<strong class="mr-auto">Toast标题</strong>
<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">
Toast内容
</div>
</div>- 使用JavaScript代码初始化Toast组件，并显示。
var toast = document.getElementById('myToast');
var toastInstance = new bootstrap.Toast(toast);
toastInstance.show();在上述代码中，我们创建了一个id为"myToast"的Toast容器，并设置了标题和内容。通过JavaScript代码，我们初始化了Toast组件，并调用show()方法显示Toast。
需要注意的是，Toast组件默认会在一定时间后自动消失，可以通过data-delay属性来设置显示时间（单位为毫秒）。如果希望手动关闭Toast，可以在Toast组件中添加一个关闭按钮，并使用data-dismiss="toast"属性。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。
- 腾讯云云服务器（CVM）：提供弹性计算能力，可根据业务需求灵活调整配置，支持多种操作系统和应用场景。了解更多信息，请访问腾讯云云服务器（CVM）。
- 腾讯云云数据库MySQL：提供高性能、可扩展的关系型数据库服务，支持自动备份、容灾和监控等功能。了解更多信息，请访问腾讯云云数据库MySQL。
相关·内容
我的目标是能够让吐司出现在屏幕角落里我的内容上方。我使用的是asp.net MVC core2，它带有已经设置好的bootstrap4。我的其他bootstrap程序运行正常。我粘贴了这些示例代码中的任何一个，toast出现在页面上，但不透明度设置为0，因此它是不可见的(根据.toast的boostrap css类)。考虑到初始
浏览 74提问于2019-05-24得票数 1
回答已采纳
2回答
在开始实现我自己的祝酒词时，我发现它们是不可见的，因为Bootstrap包含了一个.toast声明(其中包括将其不透明度设置为零)。但是Bootstrap的网站在搜索toast时没有显示结果，javascript包文件也不包含字符串toast。我不知道这是否可能是Bootstrap 3中遗留下来的东西，但是3.3.7的<
浏览 0提问于2019-01-04得票数 0
回答已采纳
我必须为我的应用程序创建一个自定义Toast，并且我尝试使用与自定义对话相同的方法，如下所示。toast可以正确地显示在页面上，但如果barrierDismissible是true I touch，toast将关闭，但事件不会在下面的页面上注册，如果我关闭barrierDismissible，widget根本不会在触摸时关闭，并且不可能关闭(因为它是可以工作<em
浏览 39提问于2019-06-01得票数 1
我想使用bootstrap 4 toast消息来显示操作状态的成功，所以我的html中有以下内容： <div id="successToast" class="toast" role="alertautohide="true" aria-atomic="true" style="position: absolute; top:50vh; left:80vh">
<
浏览 25提问于2019-08-24得票数 0
我想为Excel工作簿创建一个类似GUI的界面，并且我不希望工作簿在关闭之前是可见的。但是，使工作簿不可见会干扰代码的引用，而且如果不对其进行大量修改，我就无法读取范围。是否有一种方法可以使活动的工作簿处于活动状态，但不容易看到，以及表单是否可见？
浏览 2提问于2017-09-11得票数 0
回答已采纳
我正在使用bootstrap模式来显示我的数据库中一些条目的详细信息。它包括文本和图像，当我点击图像附件时，我会显示并聚焦一个div来显示该图像的全屏视图。我想要的是当图像div在屏幕上可见时(不包含"d-none“类)，并且我按下了Esc键，div应该关闭(添加"d-none”类)。我可以通过在div上添加keydown事件来做到这一点。但是，当我按下Esc键时，模式会自动<e
浏览 24提问于2021-09-06得票数 0
2回答
我的应用程序有两个窗口(主窗口和视频窗口)，它们都可以独立进入全屏模式。主窗口有一个按钮来切换视频窗口的可见性。当视频窗口可见时，按钮只发送如下关闭消息：当视频窗口不处于全屏模式时，它完美地工作.但是，当视频窗口在全屏模式下运行时，该窗口看起来像是被命令退出(关闭)，但它仍然活着(就像一个看不见的窗口)，并接受鼠标事件。用户无法与其他应用程序交互，因为不可见<
浏览 10提问于2015-12-21得票数 7
2回答
我试图在我的ASP.NET web应用程序中实现引导5祝酒词，使用以下代码.">...$('#companyUpdOK').show(); // and later, the code t
浏览 8提问于2022-06-08得票数 3
回答已采纳
我有一个通过清单文件注册的广播接收器。基本上，它在互联网连接打开/关闭时激活。它在打开和关闭时都会显示Toast。
浏览 3提问于2012-11-21得票数 3
回答已采纳
我正在使用Bootstrap-vue，并且有一个简单的折叠组件，这样我就可以切换内容的可见性。我正在寻找一种方法，在切换按钮中包含一个指示折叠状态的箭头图标:如果内容打开，箭头指向下方，如果关闭，箭头指向侧面。
我已经看过了这里的解决方案。然而，虽然这适用于Bootstrap 4，但我无法使其与Bootstrap-vue一起使用，因为标记元素是不同的</e
浏览 3提问于2019-02-07得票数 13
回答已采纳
我的xml布局文件中有一个图像按钮，最初设置为"gone"，但是一旦用户执行双击，它就变成“可见的”。然而，如果用户关闭应用程序并重新启动它。图像视图“消失”了。onDoubleClick(v: View) { Toast.makeText(context, "Marked as important", <
浏览 9提问于2022-10-08得票数 1
我显示了吐司，它不会消失，即使在应用程序关闭之后。我该如何修复？R.string.no_clips)); int duration = Toast.LENGTH_SHORT;
Toast.makeText(SugarLoafContext.playbackTabContext, "No clips found
浏览 0提问于2011-09-06得票数 11
回答已采纳
1回答
一个简单的问题。我在服务器端运行了两个文本框，并且关闭了它们的可见性。我使用了几个ASP.NET控件，它们要求存在文本框。但是，我是从后面的代码中填充它们的，不希望用户看到这一点。用户是否可以打开可见性并查看文本框中输入的值？我尝试使用FireBug，但似乎无法选择可见性选项来编辑它。然而，我是Firebug的新手，所以可能还有
浏览 0提问于2010-01-31得票数 1
回答已采纳
2回答
我已经开发了一个Python/Flask应用程序，并遇到了一个实现Bootstrap警报的问题，其中的想法是：
</div>
{%
浏览 17提问于2021-06-28得票数 0
回答已采纳
我正在使用Bootstrap 4中的吐司，有一件事困扰着我：<div class="toast my-3" data-delay="2500"> //fill this later <div class="
浏览 50提问于2020-05-31得票数 0
2回答
something sexy
setTimeout(function() { }, delay);
它在Bootstrap模式窗口中运行，并且应该只在该窗口打开时运行。我试着把延迟包装成类似这样的东西： var delay = 3000; my
浏览 29提问于2019-07-14得票数 0
1回答
我正在尝试检测是否在4秒内按了三次电源按钮。下面的代码不起作用。System.currentTimeMillis();
Toast.makeText(context, "POWER BUTTON CLICKED 3 TIMES", Toast.LENGTH_LONG).show();
count = 0;System.curr
浏览 0提问于2017-04-21得票数 1
回答已采纳
使用自定义钩子显示和隐藏吐司，当在toast组件按钮中调用showTost时，在外部使用此钩子时，即App按钮中出现错误时，它可以正常工作。TypeErrorToast.show
https://izso9.csb.app/node_modules/bootstrap/dist/js/bootstrap.esm.j
浏览 15提问于2021-12-23得票数 0
/floatbar /f 远程会话工作正常，但我无法切换到Windows主机。1)无浮动工具条可见 2)右Ctrl不起作用 3) Ctrl+Alt+Enter不工作 4) Ctrl+Alt+Del是工作。我可以杀了wfreerdp。但是CAD被发送到archlinux，并且KDE会话关闭。 我应该期待什么： 1)右Ctrl切换焦点到windows主机。2) Ctrl+Alt+Enter切换全屏 3)浮动条可见且可操作(最小化、关闭、
浏览 32提问于2019-12-09得票数 0
我是v5的初学者，我发现关闭按钮在我的代码中并不适用于Toasts，尽管我只是从网站上复制了代码。这是我的密码<div class="toast-header"> <
浏览 3提问于2022-09-15得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
