在前端开发中，很多网站都会使用 bootstrap 框架来搭建。其中，警告提示框(alert)是一个常用组件，用于向用户提示重要信息。然而，这些提示框默认情况下需要用户手动关闭，如果用户忘记关闭的话，页面上就会出现一堆提示框。这时候，就需要自动关闭警告提示框的插件。本文介绍一款可以自动关闭警告提示框的 npm 包——bootstrap-auto-dismiss-alert。
什么是 bootstrap-auto-dismiss-alert
bootstrap-auto-dismiss-alert 是一款基于 bootstrap 的自动关闭警告提示框插件，它能够在一定时间后自动关闭警告提示框，避免页面上出现大量未关闭提示框。
如何使用 bootstrap-auto-dismiss-alert
第一步：安装 bootstrap-auto-dismiss-alert
在项目根目录下打开终端，使用 npm 安装 bootstrap-auto-dismiss-alert。
npm install bootstrap-auto-dismiss-alert --save
第二步：引入 bootstrap-auto-dismiss-alert
在 HTML 文档中引入 bootstrap 和 bootstrap-auto-dismiss-alert。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----------------------------------- ------------
-----
-------------------------------------------------------------------------------------------
----------------
--
-------
------
---- ---------------- ------
---- - ----- -------- ---
----
------------ ------------ ----------------- ---- -----
------------
-----------------------
-
----------------------- --------- ---- ------ ------ --- ----- ------
-------
-------------
-------------
--------------------
------------------
-
----- ---------------------------------
---------
------
------
-------
------------------------------------------------------
-----------------------------------------------------------------------------------
-----------------------
----------
-------
-------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-----------------------
----------
-------
----------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-----------------------
----------
------- ----------------------------------------------------------------------------------------------------
-------
-------第三步：使用 bootstrap-auto-dismiss-alert
添加对应的 JS 代码，初始化 bootstrap-auto-dismiss-alert。
$(document).ready(function () {
// 初始化 dismiss alert 插件
$("#auto-dismiss-alert").autoDismissAlert({
// 自动关闭时间，毫秒为单位，默认为3000
dismissTime: 2000,
});
});这样，带 close 按钮的警告提示框就会在指定时间后自动关闭，而不需要手动关闭了。
源码解析
bootstrap-auto-dismiss-alert 是基于 Bootstrap 的 alert 组件 实现的自动关闭插件，并采用了 jQuery 库作为基础。
自动关闭警告提示框的原理其实很简单，就是在设置一个定时器，在定时器时间到后，通过 jQuery 将警告提示框的 HTML 元素隐藏掉。
-- -------------------- ---- -------
--- ---------------- - -------- --------- -------- -
---
-- ---------
--------------- - -------- -- -
--- ----- - -----
----------------- - ------------------- -- -
-------------------------------- -- --
-- --------------------------
--
---
--总结
自动关闭警告提示框是一个非常实用的功能，在使用 bootstrap 框架时，我们可以通过引入 bootstrap-auto-dismiss-alert npm 包来实现自动关闭警告提示框。除了警告提示框之外，它还支持其他的 Bootstrap 组件。通过学习本文，您可以较为深入地了解自动关闭警告提示框的实现原理，这对您今后进行前端开发也将会有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556a681e8991b448d3709