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

最新推荐文章于 2023-12-28 23:07:40 发布

原创最新推荐文章于 2023-12-28 23:07:40 发布 · 476 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #modal

前端专栏收录该内容

4 篇文章

订阅专栏

modal.js是一款基于HTML、CSS和JavaScript构建的移动端浏览器插件，提供展示模态框及监听基本事件的能力。它支持自定义样式，无需框架即可运行。本文介绍其快速启动、功能使用、事件监听及常见问题解答。

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.