https://github.com/nu-system/js-dialog
nu-system dialog component pure js version
https://github.com/nu-system/js-dialog
css-dialog css-modal dialog js-dialog js-modal modal
Last synced: 4 days ago
JSON representation
nu-system dialog component pure js version
- Host: GitHub
- URL: https://github.com/nu-system/js-dialog
- Owner: nu-system
- Created: 2019-07-26T08:06:54.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-04T06:51:26.000Z (over 3 years ago)
- Last Synced: 2025-11-06T21:24:06.485Z (8 months ago)
- Topics: css-dialog, css-modal, dialog, js-dialog, js-modal, modal
- Language: JavaScript
- Size: 192 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## js-dialog
[![npm package][npm-badge]][npm]
[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/@_nu/js-dialog
NU 「 no-ui 」 组件库系统 nu-system，弹窗组件 原生 JS 实现。
## 做了什么？
`@_nu/js-dialog` 只做了以下两件事情。
1. 弹窗显示和隐藏的时候切换了一个，控制状态的 class `_open`;
2. 弹窗显示和隐藏的时候切换了 `body` 的滚动状态;
`@_nu/js-dialog` 本身不会输出任何样式，对应的 Dom 结构和相应的 class 均来自于 [css-dialog](https://nu-system.github.io/css/dialog/)。
## 怎么用？
```
$ npm i @_nu/js-dialog @_nu/css-dialog
```
1. @_nu/js-dialog 为逻辑组件
2. @_nu/css-dialog 为样式组件
```HTML
显示弹窗
×
(function () {
const $btn = document.querySelector('.j_dialog_trigger');
// 点击按钮显示弹窗
$btn.addEventListener("click", function (e) {
e.preventDefault();
new NuDialog({
sel: '#dialogHello'
});
});
})();
```
## Api
```JS
var _api= new NuDialog({
// [string] dom 对象选择器，内部选择器为 document.querySelector
sel: null,
// [string] 用于控制弹窗的显示隐藏
openClass: '_open',
// [string] 弹窗内部有这个clas，点击会触发弹窗关闭逻辑
closeClass: 'j_close',
// [boolean] 初始化的时候是否显示弹窗
defaultShow: true,
// 是否控制 body 滚动条
isLockScroll: true,
// [function] 当弹窗显示时触发，
onShow: function (_api, done) {
// _api 是整个弹窗对象，可以获取所有方法和事件
// done() 表示显示弹窗，一些异步的状况的时候可以用到
// 这里返回 true 才会显示，等价于done()，其它状况弹窗不会显示
return true;
},
// 弹窗显示之后执行的事
onAfterShow: function (_api) {
// _api 是整个弹窗对象，可以获取所有方法和事件
},
// 关闭弹窗，如果用户设置了这个属性，需要手动触发弹窗关闭逻辑
onClose: function (_api, done) {
// _api 是整个弹窗对象，可以获取所有方法和事件
// done() 表示关闭弹窗，一些异步的状况的时候可以用到
// 这里返回 true 才会关闭，等价于done()，其它状况弹窗不会关闭
return true;
}
});
```