modal-jngcs 简单的移动端modal插件

最新推荐文章于 2023-07-01 16:08:07 发布

IOT_player

最新推荐文章于 2023-07-01 16:08:07 发布

阅读量359

点赞数

分类专栏：前端文章标签： javascript css modal

本文链接：https://blog.csdn.net/IOT_player/article/details/104901965

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

modal.js Guidance

项目地址
 功能体验
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.

Quick Start

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>

Function

Modal.set()

Initialize the modal.
Modal.set().show()

show the modal. must call set() before show() like Modal.set().show();
Modal.hide()

hide the modal.

Options

function `set()`

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 type

Value 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_title

Value Description
none don’t need modal title
legal value of need_rebuild

Value Description
0 use modal default style.
1 rebuild your style modal, you can rewrite HTML, CSS.
legal value of animation

Value Description
fade modal fade slowly.
pop modal pop up and fall down slowly.

Value	Description
toast	no button, timeout with 1500ms.
alert	with only confirm button, no timeout.
confirm	with cancel and confirm buttons, no timeout.

Value	Description
none	don’t need modal title

Value	Description
0	use modal default style.
1	rebuild your style modal, you can rewrite HTML, CSS.

Value	Description
fade	modal fade slowly.
pop	modal pop up and fall down slowly.

function `show()`

Property	Type	Default value	Description
success	function		callback after success
fail	function		callback after fail

How To Listen

If you use the default style, modal.js provider the className for you.

alert type

modal.js provide className .modal-btn-confirm in confirm button.

confirm type

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.

Example

// 在业务逻辑中显示模态框
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();
    }
});

Attention ☆

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 use show(), 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.

FAQ

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: 1 in set(). Then you can modify html and css you like.

Update Notes

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版本为大版本更新，不向前兼容。

IOT_player

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
modal-jngcs 简单的移动端modal插件

modal.js Guidancemodal.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 ma...
复制链接

扫一扫