标题

时间戳

×

消息正文

在这个结构中，我们使用了Bootstrap的样式类来设置Toast容器的外观和行为。其中：

– `toast`类定义了一个Toast容器，并且设置为不可见状态。

– `toast-header`类定义了Toast头部的样式，并包含标题、时间戳和关闭按钮。

– `close`类定义了关闭按钮的样式，以及与之相关联的data-dismiss属性，用于在点击后关闭Toast。

– `toast-body`类定义了消息正文的样式。

步骤3：触发Toast显示

现在，您已经创建好一个基本的Toast容器元素。接下来，您需要使用JavaScript代码来触发它显示。以下是示例代码：

“`javascript

$(‘.my-toast’).click(function() {

$(‘.toast’).addClass(‘show’);

});

这段代码表示，在`.my-toast`元素上注册一个点击事件处理程序。当用户单击该元素时，将会给`.toast`添加一个名为“show”的CSS类，从而使其变成可见状态。

步骤4：自动隐藏或手动关闭

最后，在您完成显示消息后，请考虑如何自动隐藏或手动关闭它。以下是两种常见方法：

1. 自动隐藏：使用Bootstrap提供的JavaScript方法`toast()`来自动隐藏消息。例如：

$(‘.toast’).toast(‘show’);

setTimeout(function() {

$(‘.toast’).toast(‘hide’);

}, 5000);

这段代码表示，在Toast显示5秒后，将会自动隐藏它。

2. 手动关闭：为关闭按钮添加一个点击事件处理程序，以便在用户单击它时手动关闭Toast。例如：

$(‘.close’).click(function() {

$(‘.toast’).removeClass(‘show’);

这段代码表示，在`.close`元素上注册一个点击事件处理程序。当用户单击该元素时，将会给`.toast`移除名为“show”的CSS类，从而使其变成不可见状态。

示例代码

以下是完整的示例代码：

显示消息