iOS Style Dialog Popup Plugin For jQuery - Modal.js

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.

<link rel="stylesheet" href="modal.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="modal.js"></script>

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

$.alert('Alert Content');

$.alert('Alert Content', 'Alert Title');

$.alert('Alert Content', function () {
  alert('Callback');
});

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

$.confirm('Confirm Content');

$.confirm('Confirm Content', 'Confirm Title');

$.confirm('Confirm Content', function () {
  alert('Confirm Callback');
});

$.confirm('Confirm Content', function () {
  alert('Confirm Callback');
},
  alert('Cancel Callback');
});

4. Create a preloader with custom message.

$.showPreloader('Loading Message');

setTimeout(function () {
  $.hidePreloader(); // hide the preloader
}, 2000)

5. Create a loading indicator.

$.showIndicator(); 

setTimeout(function () {
  $.hideIndicator(); // hide the indicator
}, 2000)

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

$.toast('Toast Message');

// auto dismiss after 3 seoncds
$.toast('Toast Message', 3000);

$.toast('Toast Message', 3000,function () {
  alert('Callback');
});

7. Create a custom action sheet.

$.actions([
  [{
    text: 'Title',
    label: true,
    close: false, 
    bold: true, 
    disabled: true,
    bg: 'blue',
    color: 'red', 
  }],[{
    text: 'Text 1',
    close: false,
    onClick: function () {
      alert('Callback');
    }
  },{
    text: 'Text 2',
    onClick: function () {
      alert('Callback');
    }
  }],
]);

8. Create a prompt dialog.

$('#demo').click(function () {
  $.prompt('Default', 'Title',function(value){
    alert('Confirm: '+value);
  },function(){
    alert('Cancel');
  });
});

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.