iOS Style Dialog Popup Plugin For jQuery Modal js - Download iOS Style Dialog Popup Plugin For jQuery - Modal.js

Download iOS Style Dialog Popup Plugin For jQuery – Modal.js

By Posted on

This time I will share jQuery Plugin and tutorial about iOS Style Dialog Popup Plugin For jQuery – Modal.js, hope it will help you in programming stack.

File Size: 10.7 KB
Views Total: 6356
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Modal.js  is a simple, flexible, multi-purpose jQuery plugin that lets you create Apple iOS style dialog popups (alert/confirm dialog boxes, loading indicators, toast messages and action sheets) for your mobile-first web applications.

How to use it:

1. To get started, you first have to include the following JS and CSS files on the webpage.

view source
1 <link rel="stylesheet" href="modal.css">
2 <script src="//code.jquery.com/jquery.min.js"></script>
3 <script src="modal.js"></script>

2. Create an alert dialog with custom message and OPTIONAL alert title and callback function.

view source
1 $.alert('Alert Content');
2  
3 $.alert('Alert Content', 'Alert Title');
4  
5 $.alert('Alert Content', function () {
6   alert('Callback');
7 });

3. Create a confirmation dialog with custom message and OPTIONAL confirm title and confirm/cancel callback functions.

view source
01 $.confirm('Confirm Content');
02  
03 $.confirm('Confirm Content', 'Confirm Title');
04  
05 $.confirm('Confirm Content', function () {
06   alert('Confirm Callback');
07 });
08  
09 $.confirm('Confirm Content', function () {
10   alert('Confirm Callback');
11 },
12   alert('Cancel Callback');
13 });

4. Create a preloader with custom message.

view source
1 $.showPreloader('Loading Message');
2  
3 setTimeout(function () {
4   $.hidePreloader(); // hide the preloader
5 }, 2000)

5. Create a loading indicator.

view source
1 $.showIndicator();
2  
3 setTimeout(function () {
4   $.hideIndicator(); // hide the indicator
5 }, 2000)

6. Create a toast message with custom message and OPTIONAL timeout and callback function.

view source
1 $.toast('Toast Message');
2  
3 // auto dismiss after 3 seoncds
4 $.toast('Toast Message', 3000);
5  
6 $.toast('Toast Message', 3000,function () {
7   alert('Callback');
8 });

7. Create a custom action sheet.

view source
01 $.actions([
02   [{
03     text: 'Title',
04     label: true,
05     close: false,
06     bold: true,
07     disabled: true,
08     bg: 'blue',
09     color: 'red',
10   }],[{
11     text: 'Text 1',
12     close: false,
13     onClick: function () {
14       alert('Callback');
15     }
16   },{
17     text: 'Text 2',
18     onClick: function () {
19       alert('Callback');
20     }
21   }],
22 ]);

8. Create a prompt dialog.

view source
1 $('#demo').click(function () {
2   $.prompt('Default', 'Title',function(value){
3     alert('Confirm: '+value);
4   },function(){
5     alert('Cancel');
6   });
7 });

Change log:

2017-09-16

  • add prompt

This awesome jQuery plugin is developed by zkboys. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Related posts: