Alert prompt box open-source framework Tiny-Alert and zeptotiny-alert based on Zepto

Alert prompt box open-source framework Tiny-Alert and zeptotiny-alert based on Zepto
Project homepage: http://shootyou.github.io/tiny-alert/?is tiny-alert?

This is a prompt box plug-in based on Zepto, which can be used on mobile terminals for better results. It is designed as a more beautiful alternative to mobile native alert and confirm prompt boxes. It also implements a loading effect. Its core code references rDailog and is adapted to zepto based on it, removing features that are not available on mobile terminals and making it look more beautiful.
It has the following features:

• Lightweight, with no more than 300 lines of code, and only 2 k after compression.
• Zepto is more suitable for mobile terminals.
• Callback is supported.
• Barely beautiful.
• Built based on Grunt. In this way, I feel more and more like a front-end attacker.

How to use Tiny-Alert

First introduce related resources:

<link rel="stylesheet" type="text/css" href="stylesheets/zepto.alert.css"><script type="text/javascript" src="http://libs.useso.com/js/zepto/1.1.3/zepto.min.js"></script><script type="text/javascript" src="js/zepto.alert.min.js"></script>

If you think the style is ugly, change it yourself. Pay attention to the resources under images.

Then we can construct a simple loading prompt box.

$('#demo-1').on('click', function() {        $.dialog();});

Click here to see the effect. By default, it is a box that does not disappear. If you click it, refresh the page and it will not disappear.

Create a prompt dialog box.

$ ('# Demo-2 '). on ('click', function () {$. dialog ({content: 'window will be closed automatically after 2 seconds ', title: "alert", time: 2000 });});

Click here to see the effect. The pop-up box is closed in 2 seconds.

A confirmation box supports callback.

$ ('# Demo-3 '). on ('click', function () {$. dialog ({content: 'Dialog box content', title: 'OK', OK: function () {alert ('I am a confirmation button. When the callback function returns false, the dialog box is not closed. '); Return false ;}, cancel: function () {alert ('here is the cancel button') ;}, lock: false });});

Click here to see the effect.

Attributes and default values

// Content: 'loading... ', // icon style: load/OK/alert title: 'load', // width: 'auto', // height: 'auto ', // confirmation button callback function OK: null, // cancel button callback function cancel: null, // OK button text okText: 'OK', // cancel button text cancelText: 'cancel', // automatic shutdown time (millisecond) time: null, // whether to lock screen lock: true, // z-index value zIndex: 9999

For the first time, I hope to give you more advice.

Zepto animate callback

After checking, it defines that the callback function is executed first and then the animation effect is executed.
Animate (transforms, duration, easing, callback) animate (transforms, {duration: milliseconds, easing :'... ', complete: callback}) // use CSS transform/opacity to do an animation, // optionally supply a callback method to be executed after the animation is complete