jQuery Prompt21 是一个用户界面库，可以用来创建各种类型的弹出框和提示。它是基于 jQuery 的，能够在前端应用中被广泛使用。本文将介绍如何在你的项目中使用 jQuery Prompt21，并提供一些实际示例代码。
安装与引入
要使用 jQuery Prompt21，你需要先在你的项目中安装它。你可以通过 npm 来完成安装：
npm install jquery-prompt21
然后，在你的 HTML 文件中引入 jQuery 和 jQuery Prompt21 库：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="node_modules/jquery-prompt21/dist/jquery.prompt21.min.js"></script> <link href="node_modules/jquery-prompt21/dist/jquery.prompt21.min.css" rel="stylesheet" />
创建弹出框
要创建一个弹出框，你需要使用 $.prompt() 方法。该方法会接受一个对象参数，用来配置弹出框的内容、按钮等属性。下面是一个简单的示例：
$.prompt({
title: 'Hello World',
message: 'This is a simple message.',
buttons: {
OK: true
}
});在这个示例中，我们创建了一个标题为 "Hello World" 的弹出框，带有一条简单的消息和一个名为 "OK" 的按钮。当用户点击 "OK" 按钮时，弹出框会关闭。
jQuery Prompt21 还支持许多其他配置选项，包括自定义样式、输入框、复选框等。你可以查看官方文档以了解更多详情。
高级使用
除了基本功能外，jQuery Prompt21 还提供了许多高级功能和选项，可以帮助你创建更复杂的弹出框和提示。下面是一些示例：
带有输入框的弹出框
$.prompt({
title: 'Please enter your name',
input: true,
buttons: {
OK: true,
Cancel: false
}
});在这个示例中，我们添加了一个输入框，并将 "OK" 和 "Cancel" 按钮放在了弹出框的底部。当用户点击 "OK" 按钮时，输入框中的值将作为 $.prompt() 方法的返回值。
带有确认框的弹出框
-- -------------------- ---- -------
----------
------ ---- --- -------
-------- ----- ------ ------ -- ---------
----- ----------
-------- -
---- -----
--- -----
-
---在这个示例中，我们创建了一个警告类型的弹出框，询问用户是否确定执行某个操作。弹出框带有两个按钮："Yes" 和 "No"。当用户点击 "Yes" 按钮时，弹出框会关闭并触发一个回调函数。
自定义按钮样式的弹出框
$.prompt({
title: 'Custom buttons',
message: 'This is a message with custom buttons.',
buttons: {
OK: { classes: ['btn', 'btn-primary'], text: 'Confirm' },
Cancel: { classes: ['btn', 'btn-danger'], text: 'Cancel' }
}
});在这个示例中，我们创建了一个带有自定义样式的弹出框。我们使用了 Bootstrap 的按钮样式，并将 "OK" 按钮改为 "Confirm" 文本，"Cancel" 按钮改为 "Cancel" 文本。
总结
在本文中，我们介绍了如何在你的项目中使用 jQuery Prompt21 库。我们讨论了库的基本用法、高级功能和选项，并提供了一些实际示例代码。当你需要在前端应用中创建弹出框和提示时，jQuery Prompt21 可以成为你的
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/39145