简介
minpopup 是一款基于 jQuery 的轻量级弹窗插件，支持显示文本、图像、Iframe 以及自定义内容。该插件提供了多种配置选项，适用于各种弹窗场景。
安装和使用方法
安装
要使用 minpopup，需要先安装 jQuery。然后在命令行运行如下命令安装 minpopup：
npm install minpopup
使用
在 HTML 文件中引入 jQuery 和 minpopup：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="node_modules/minpopup/js/minpopup.min.js"></script>
创建一个按钮，为其添加一个 click 事件：
<button id="btn">打开弹窗</button>
<script>
$('#btn').click(function() {
$.minPopup();
});
</script>这样就可以在点击按钮时打开一个空白的弹窗了。
配置选项
minpopup 支持以下配置选项：
type
弹窗类型，支持 text（文本）、image（图片）、iframe。
$.minPopup({
type: 'image',
url: 'https://example.com/image.jpg'
});url
打开的链接地址，type 为 iframe 类型时才生效。
$.minPopup({
type: 'iframe',
url: 'https://example.com/',
});content
自定义内容，支持 HTML 字符串或 jQuery 对象。
var $content = $('<div>自定义内容</div>');
$.minPopup({
content: $content,
});width
弹窗宽度。
$.minPopup({
width: 500,
});height
弹窗高度。
$.minPopup({
height: 400,
});title
弹窗标题。
$.minPopup({
title: '弹窗标题',
});closeButtonText
关闭按钮上的文本。
$.minPopup({
closeButtonText: '关闭',
});closeButtonClass
关闭按钮的 CSS 类名。
$.minPopup({
closeButtonClass: 'my-close-button',
});onClose
弹窗关闭时的回调函数。
$.minPopup({
onClose: function() {
console.log('弹窗已关闭');
},
});示例
在这个示例中，我们创建一个 button，并为其添加一个 click 事件。点击按钮时，打开一个 500x400 像素的文本弹窗。
-- -------------------- ---- -------
------- ----------------------
--------
-------------------------- -
------------
----- -------
-------- ------------------
------ ----
------- ----
---
---
---------结论
minpopup 是用于快速创建弹窗的一款简单易用的插件。它的选项配置丰富，可以根据需求选择适合自己的弹窗类型和样式。同时，该插件还提供了 onClose 回调函数，方便开发者在弹窗关闭时做一些额外的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558a181e8991b448d5f02