Built based on Grunt. In this way, I feel more and more like a front-end attacker.How to use Tiny-AlertFirst introduce related resources:
<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.