bPopup是一个轻量级的jQuery插件，它可用于在网页上创建弹出窗口。使用bPopup可以快速方便地实现弹出窗口效果，并且支持自定义样式。
安装
安装bPopup非常简单，通过npm进行安装即可：
npm install bpopup
使用
使用bPopup创建弹出窗口非常简单，只需要按照以下步骤进行即可：
- 引入jQuery和bPopup的js文件
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="path/to/bpopup.js"></script>
- 创建HTML结构
<div id="my-popup"> <h1>这是一个弹出窗口</h1> <p>欢迎来到我的网站！</p> <button class="close-btn">关闭</button> </div>
- 调用bPopup方法
$('#my-popup').bPopup();这样就可以实现一个简单的弹出窗口了。
参数说明
bPopup支持多种参数配置，如下表所示：
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| closeClass | 字符串 | "b-close" | 关闭按钮的类名，点击该按钮可以关闭弹出窗口 |
| follow | 布尔值 | true | 是否跟随网页滚动条 |
| followSpeed | 数字 | 500 | 跟随速度，单位为毫秒 |
| modal | 布尔值 | true | 是否显示遮罩层 |
| opacity | 数字 | 0.7 | 遮罩层透明度 |
| position | 字符串 | "center" | 弹出窗口的位置，可选值为："top-left"、"top-center"、"top-right"、"center-left"、"center"、"center-right"、"bottom-left"、"bottom-center"、"bottom-right" |
| positionStyle | 字符串 | "fixed" | 弹出窗口的定位方式，可选值为："fixed"、"absolute" |
| scrollable | 布尔值 | true | 是否允许网页滚动 |
| speed | 数字 | 250 | 弹出和关闭的速度，单位为毫秒 |
| transition | 字符串 | "fadeIn" | 弹出和关闭的动画效果，可选值为："fadeIn"、"slideDown"、"slideIn" |
| transitionClose | 字符串 | null | 关闭时的动画效果，可选值和transition相同 |
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------
----- ---------------- --------------------------
-------
------
------- ----------------------------
---- --------------
-----------------
----------------
------- -----------------------------
------
------- -----------------------------------------------------------
------- ---------------------------------
--------
------------ -
-------------------------------- -
-----------------------
----------- ------------
------ ------
--------- ---------
----------- -----------
---
---
---
---------
-------
-------以上代码将创建一个按钮，点击该按钮会弹出一个居中的窗口，窗口内容为一个标题、一段文本和一个关闭按钮。关闭按钮的类名为"close
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36876