一个原生写的简单模态框,兼容IE8。
1.支持标签属性关闭弹窗。
2.支持点击弹窗区域外背景关闭弹窗。
3.支持两种打开弹窗动画效果。
4.支持ESC快捷键关闭弹窗。
5.支持打开多个弹窗。
│ //根目录
│ modal.html //示例文件
│
├─css //样式目录
│ modal.css
│
└─js //js目录
modal.js
//打开弹窗
modal.init({
el: '#js-modal', //挂载值,必须是标签元素的#id
open: 'show' //show为打开
});
//关闭弹窗
modal.init({
el: '#js-modal', //挂载值,必须是标签元素的#id
open: 'hide' //hide为关闭
});
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
el | 挂载元素ID | string | 必须是元素ID | --- |
open | 打开或关闭弹窗 | string | show、hide | --- |
fixed | 弹窗随滚动条而上下移动 | boolean | true、false | false |
animation | up-弹窗从上到下出现动画,soak-弹窗从小到大出现动画 | string | up、soak、none | none |
backClose | 背景关闭 | boolean | true、false | true |
<div id="js-modal" class="modal up" data-backClose="static">
<div class="modal-dialog modal-sm">
<div class="modal-header">
<h1>标题2</h1>
<button type="button" class="close" data-close="modal">×</button>
</div>
<div class="modal-content" style="height: 300px;">
内容随便写
</div>
<div class="modal-foot">
<button class="btn btn-default" data-close="modal">取消</button>
<button class="btn btn-primary">确定</button>
</div>
</div>
</div>
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
class | up-弹窗从上到下出现动画,soak-弹窗从小到大出现动画 | string | up、soak | --- |
class | class="modal-dialog"-弹窗宽度追加class | string | modal-sm、modal-lm | --- |
data-backClose | 禁止背景关闭弹窗 | string | 必须是static | --- |
data-close | 关闭弹窗 | string | 必须是modal | --- |