modal.js is a mobile-browser plugin build with HTML CSS and JavaScript.
It provide the ability to show the model in your mobile-browser, and listen the basic events.
You can also make your own style modal whether the plugin's style.
The modal.js rely on pure js,you can run it without any frame.
-
import js
<!-- v0需要粘贴html，v1不需要粘贴html，两者不互相兼容 --> <!-- v0.x.x --> <script src="https://jngcs.top/common/modalv0/modal.min.js"></script> <!-- v1.x.x --> <script src="https://jngcs.top/common/modalv1/modal.min.js"></script>
-
import css
<link href="https://jngcs.top/common/modal/modal.min.css" rel="stylesheet" />
-
if you use modalv0, copy code below, then paste under the
<body>element and must under the<body>if you use modalv1, you needn't copy the html.
<!-- modal --> <div id="mask" style="display: none;"></div> <div id="modal" style="display: none;"> <div class="modal-content"> <div class="modal-title"></div> <div class="modal-msg">哈哈哈</div> </div> <div class="modal-button"></div> </div>
-
Modal.set()Initialize the modal.
-
Modal.set().show()show the modal. must call
set()beforeshow()likeModal.set().show(); -
Modal.hide()hide the modal.
| Property | Type | Default value | Description |
|---|---|---|---|
| type | string | toast | modal type. |
| content_title | string | none | modal title. |
| content_msg | string | modal content message. | |
| cancel_text | string | 取消 | text of cancel button. |
| confirm_text | string | 确定 | text of confirm button. |
| need_rebuild | number | 0 | is modal need rebuild. |
| toast_time | number | 1500 | show time while type = 'toast'. |
| animation | string | fade | animation. |
-
legal value of
typeValue Description toast no button, timeout with 1500ms. alert with only confirm button, no timeout. confirm with cancel and confirm buttons, no timeout. -
legal value of
content_titleValue Description none don't need modal title -
legal value of
need_rebuildValue Description 0 use modal default style. 1 rebuild your style modal, you can rewrite HTML, CSS. -
legal value of
animationValue Description fade modal fade slowly. pop modal pop up and fall down slowly.
| Property | Type | Default value | Description |
|---|---|---|---|
| success | function | callback after success | |
| fail | function | callback after fail |
If you use the default style, modal.js provider the className for you.
modal.js provide className .modal-btn-confirm in confirm button.
modal.js provide classNmae .modal-btn-cancel and .modal-btn-confirm .
You can listen the events by className in your business logic like this:
var confirmBtn = document.getElementsByClassName('modal-btn-confirm')[0];
confirmBtn.addEventListener('click', function() {
// DO SOMETHING HERE
Modal.hide();
})If you use mui to listen like this:
mui('#modal').on('tap', '.modal-btn-cancel', function() {
console.log('cancel');
Modal.hide();
});Remember to use mui().off()to cancel the listener after your work, or the code in listener will be called many times.
// 在业务逻辑中显示模态框
Modal.set({
type: 'alert',
content_title: 'title',
content_msg: 'message',
animation: 'fade'
}).show({
success: function(res) {
console.log(res);
// 监听modal.js提供的按钮class，并执行业务，最后关闭modal
var confirmBtn = document.getElementsByClassName('modal-btn-confirm')[0];
confirmBtn.addEventListener('click', function() {
// DO SOMETHING HERE
Modal.hide();
})
},
fail: function(res) {
console.log(res);
// ...
Modal.hide();
}
});-
The Id and className modal.js used:
#mask #modal .modal-content .modal-title .modal-msg .modal-button .modal-btn-cancel .modal-btn-confirm @keyframes fade @keyframes pop @keyframes mask-show
make sure not to use them in other place.
-
If you use the default style, don't modify the html and css in Quict Start.
-
Call function
set()before useshow(), otherwise the modal will not work. -
If you use mui to listen, remember to use
mui().off()to cancel the listener, or the code in listener will be called many times.
-
Q: The animation didn't work?
A: modal.js is still in Alpha edition, something maybe is testing.
-
Q: How to rebuild?
A: Use the property
need_rebuild: 1inset(). Then you can modify html and css you like.
v0.0.2 Alpha(13/3/2020):
- 新增错误捕获功能
- 删除
show()函数的默认成功回调函数内部功能
v0.0.3 Alpha(13/3/2020):
- 新增链式调用顺序要求
v0.1.1 Alpha(14/3/2020):
- 新增动画效果
- 修复同一页面下存在有或无标题的两种模态框情况下，导致消息高度变化的问题
v0.1.2 Alpha(15/3/2020):
- 修复mask动画短暂黑屏的问题
- 修复由于未对对象进行深度复制导致内容异常的问题
- 优化
show()函数成功后回调函数的执行顺序
v0.1.3 Alpha(18/3/2020)
- 新增modal离场动画
- 优化modal圆角尺寸
- 删除
hide()函数的回调函数
v0.1.4 Alpha(19/3/2020)
- 修复真机情况下modal离场动画不起效的问题
v0.2.0 Beta(22/3/2020)
- 修复了
show()函数中回调函数深度复制后出错的问题 - 版本迭代到Beta版
v1.0.0 Beta (22/4/2020)
- 新增页面dom监听，动态插入modal元素，不用再粘贴html代码。
- 由于dom的监听事件，不再支持IE8以下浏览器。
- 1.0.0版本为大版本更新，不向前兼容。