Bootstrap是一个广泛使用的前端框架，可以使你快速构建具有样式和交互效果的页面。Bootstrap Dialog是一个开源插件，它基于Bootstrap模态框组件，提供了更丰富的功能和样式，可用于创建各种弹出窗口（如警告、确认、提示等）。
安装
首先，在HTML文件中引入Bootstrap和BootstrapDialog文件：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/css/bootstrap-dialog.min.css" integrity="sha512-cKt7hLsJ+qVnY9YD/cSqeeZJnFZ/SwRMaG+8rEJ+k+jxgjclKaECbPyYPW9XeQJryCzfZPb7evcBzRJWiNjH/g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.min.js" integrity="sha512-E2QZP+oU5vS8bXYWU5Q6iFxt6gL4EDfI4feA4NI/a/KpGPEby3ek08NJGkKeWcvgz6xJn0V21Qj8XQLWgHtxCQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
基本用法
创建Bootstrap Dialog有两种方式：使用JavaScript API或HTML标签。以下是使用JavaScript API的示例：
-- -------------------- ---- -------
----------------------
------ ------- -------
-------- ------- ---------
-------- --
------ ---------
------- ---------------- -
---------------
-
-- -
------ -----
--------- --------------
------- ---------------- -
--------- ------ ----------
---------------
-
--
---这将创建一个带有标题、消息和两个按钮（取消和确定）的对话框。当用户单击'OK'按钮时，该对话框将关闭并弹出警告框。
自定义样式
Bootstrap Dialog提供了各种选项，可让你定制对话框的外观和行为。例如，你可以更改对话框的大小、位置、颜色、按钮等。以下是使用自定义选项的示例：
-- -------------------- ---- -------
----------------------
------ ----------- --------
-------- ----- -- - ---------- --------
----- ---------------------------
----- -----------------------------
---------- -----
-------- -----
-------- --
------ ---------
------- ---------------- -
---------------
-
-- -
------ -------
--------- --------------
------- ---------------- -
----------- ------ ----------
---------------
-
--
---这将创建一个小型的警告类型对话框，可以拖动，并带有两个按钮（取消和保存）。
高级用法
Bootstrap Dialog支持更高级的功能，例如使用Ajax加载内容、表单验证、嵌入式视频等。以下是一些示例：
Ajax加载内容
-- -------------------- ---- -------
----------------------
------ ----- --------
-------- ---------------- -
--- -------- - ---------------------------------------------------
------ ---------
--
-------- --
------ ---------
------- ---------------- -
---------------
-
-- -
------ -----
--------- --------------
------- ---------------- -
--------- ------ ----------
---------------
-
--
---这将创建一个具有从服务器加载的内容的对话框。
表单验证
BootstrapDialog.show > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/1969) ，转载请注明来源 [https://www.javascriptcn.com/post/1969](https://www.javascriptcn.com/post/1969)