简介
micro-dialog 是一款轻量级的模态框插件，可以用于在 Web 网页中创建各种弹框。它可以自适应不同大小的屏幕，并能够在多个浏览器上正常运行，并支持以 html、text、url、iframe 的形式展现内容。
安装
可以通过 npm 来安装 micro-dialog，使用以下命令：
$ npm install micro-dialog --save
或者也可以直接下载压缩包，然后在代码中引入 js 和 css 文件：
<link href="path/to/micro-dialog.css" rel="stylesheet"> <script src="path/to/micro-dialog.js"></script>
使用
初始化
使用 micro-dialog 创建一个模态框前，需要进行初始化。在初始化时，可以设置一些全局属性：
MicroDialog.init({
animateIn: 'fadeIn',
animateOut: 'fadeOut',
});以上代码将开启一个全局的动画效果，在打开和关闭模态框的时候会触发类名为 fadeIn 和 fadeOut 的动画。animateIn 和 animateOut 属性都有一组可选的值：
- fadeIn / fadeOut：淡入淡出动画。
- zoomIn / zoomOut：缩放动画。
- flipInX / flipOutX / flipInY / flipOutY：翻转动画。
- rotateIn / rotateOut：旋转动画。
简单使用
micro-dialog 提供了 alert 和 confirm 两个方法，可以快速创建出一个简单的模态框。两个方法的区别在于前者只有一个确定按钮，后者有确定和取消两个按钮。
使用 alert 方法：
MicroDialog.alert('这里是模态框的内容');使用 confirm 方法：
MicroDialog.confirm('这里是模态框的内容', function () {
// 点击确定按钮的回调函数
}, function () {
// 点击取消按钮的回调函数
});自定义使用
除了使用 alert 和 confirm 方法之外，也可以直接使用 MicroDialog 对象来创建模态框。MicroDialog 对象具有 open 和 close 两个方法，可以用来打开和关闭模态框。
<button id="btn">打开模态框</button>
<div id="dialog" style="display: none;">
这里是模态框的内容。
</div>-- -------------------- ---- -------
-------------------------------------------------------- -------- -- -
------------------
-------- --------------------------------------------
------ ---------
-------- --
----- -----
---------- --------------
--------- -------- -- -
-----------------------
-
-- -
----- -----
---------- ---
--------- -------- -- -
-----------------------
-
--
---
---以上代码创建了一个按钮和一个隐藏的 div 元素（表示模态框的内容），点击按钮则会打开一个自定义的模态框，它的内容和标题都从 JavaScript 代码中传递进去。同时，也可以在 buttons 属性中自定义要显示的按钮，每个按钮都有一个文本和一个回调函数。按钮的样式可以根据 className 属性来设置，这个类名应该已经在 css 文件中定义过了。
示例代码
代码中第一个例子使用了 alert 和 confirm 方法，第二个例子使用了 MicroDialog 对象，自定义了模态框的内容和按钮。这些例子可以在浏览器中运行，查看效果。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- ----------
----- ------------------------------------------------------ -----------------
-------
------
---------------- -------
------- ------------------------ --------------
------- -------------------------- ----------------
------- -------------------------------------
---- -------- ----------------------
---------------------
-------------------
------- -----------------------------------------
------
------- --------------------------------------------------------------
--------
-------- ----------- -
---------------------- ----- ------
-
-------- ------------- -
------------------------ ------- ----- -------- -- -
-----------------------
-- -------- -- -
-----------------------
---
-
-------- --------- -
------------------
-------- -----------------------------------------
------ ---------
-------- --
----- -----
---------- ---
--------- -------- -- -
-----------------------
-
--
---
-
---------
-------
-------总结
micro-dialog 是一款小巧轻便的模态框插件，使用简单，代码量不大。它可以满足绝大部分 Web 网页中弹框的需求，例如弹出提示框、确认框、登录框、分享框等等。希望这篇使用教程能够帮助到初学者掌握 micro-dialog 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f481d8e776d080410e8