介绍
npm 是一个 JavaScript 包管理器，是全球最大的开源库生态系统。它可以让开发人员共享自己的代码，并使用别人的代码。我们可以通过发布 npm 包的方式，让其他人使用我们的代码。
blockui-npm 是一个基于 jQuery BlockUI 模块的 npm 包。它可以快速方便地在网站中创建模态对话框，提示框等等。
在本篇文章中，我们将会介绍如何使用 blockui-npm，包括安装、使用以及一些基本的示例。
安装
使用 npm 安装 blockui-npm，可以通过以下命令进行安装：
npm install blockui-npm --save
上述命令会将 blockui-npm 安装到你的项目中，并将其加入到 package.json 依赖中。
使用
要使用 blockui-npm，请确保在页面中包含 jQuery 和 BlockUI。然后，只需使用 import 或者 require 引入 blockui-npm，就可以开始使用。
以下是一个示例，演示了如何使用 blockui-npm 在页面中创建一个模态框：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------------
---- -- ------ - ------- ---
------- -----------------------------------------------------------
------- ----------------------------------------------------------
---- -- ----------- ---
------- ----------------------------------------------------------------
-------
------
------- --------------------------
---- ----------- ------------------------------------
--------
-- --------
--- ------ - -------------
--- ------ - -------------
-- --------
----------------------- -
-- -------
--------------
-------- -----------------
---- -
------- -------
---------------- -------
--------------
---------------
----------
-----------
-------------------
-------------
------- ---------
--
----------- -
---------------- -------
-------- ----
------- ---------
-
---
---
---------
-------
-------在以上示例中，我们首先引入了需要的 JavaScript 库：jQuery 和 BlockUI，以及 blockui-npm。然后，我们有一个按钮和一个隐藏的 div 来作为对话框。
在按钮点击事件中，我们可以使用 BlockUI 的 block 方法将 div 包装成模态对话框。在这个方法中，我们设置了模态对话框的一些属性，例如样式以及遮罩层等等。
示例
除了模态对话框之外，blockui-npm 还可以帮助您快速创建其他组件，例如提示框和进度指示器等等。
以下是一些示例，演示了如何创建各种组件：
提示框
$.blockUI({
message: '<p>这是一条提示信息</p>',
timeout: 2000
});进度指示器
-- -------------------- ---- -------
-----------
-------- ---------------------
---- -
------- -------
-------- -------
---------------- -------
------------------------ -------
--------------------- -------
-------- ---
------ ------
-
--- 加载动画
$.blockUI({
message: '<img src="https://cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif" />',
css: {
border: 'none',
backgroundColor: 'transparent'
});等待框
-- -------------------- ---- -------
-----------
-------- ----------- --------------
---- -
------- -------
-------- -------
---------------- -------
------------------------ -------
--------------------- -------
-------- ---
------ ------
--
----------- - ---------------- ------ -
---总结
在本篇文章中，我们介绍了 npm 包 blockui-npm 的使用方法，包括安装、引入和一些示例。希望本文能够帮助您更好地使用 blockui-npm。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c2c81e8991b448d9cb3