popupsjs _轻量级弹窗组件
3.1.0+ 修复bug, 调整api和className
安装
// npm
npm install popupsjs // 装载
npm update popupsjs // 更新
// yarn
yarn add popupsjs // 装载
yarn upgrade popupsjs // 更新
// Browserify(https://github.com/songyijian/Popups.git)
<script src="../dist/popupsjs.umd.js"></script>
<link rel="stylesheet" type="text/css" href="../dist/index.css" />
快速上手
// es2015+
import Popups from "popupsjs";
import "popupsjs/dist/index.css"; // 注意:关闭webpack css {exclude: /node_modules/}
new Popups(el,{config})
函数 API
API
new Popups(
contentString, // 弹框内容 `<p>xxx</p>`
{
initShow: true, // 初始化显示状态 默认显示弹窗
addClass: '', // 增加class空间, bg & popups-document
bg: true, // 是否有背景
closeHtml: false, // 关闭按钮的内容
timeOut: 0, // 定时关闭
append: document.body,// 插入位置
created: function(){},// 创建回调未插入 // (_this)=>{}
show: function(){}, // 显示回调
close: function(){}, // 关闭回调(从插入位置删除,但内存中存在)
}
)
FN
this.close() // 关闭
this.show() // 显示
this.updateHtml(contentString, fn(This)) // 修改内容区域(信息,回调)
ATTR
this.live // 0=dom不存在 | 1=创建并插入了指定位置
this.nDocument// .popups-document
this.nClose // .popups-closebtn
this.nBody // .popups-body
全局API (_this = 实例)
Popups.createdBefer = function(_this){}
Popups.showBefer = function(_this){}
Popups.closeBefer = function(_this){}
弹框DOM结构:
弹框结构
<div class="popups-document a">
<big class="popups-closebtn"></big>
<div class="popups-body">内容1</div>
</div>
<!-- 背景 -->
<div class="popups-bg a"></div>
js节点
this.nDocument // .popups-document
this.nClose // .popups-closebtn
this.nBody // .popups-body
addClass
同时追加 popups-bg.a & popups-document.a