iOS-style Dialog Box Plugin For jQuery - Confirm.js

Confirm.js is a jQuery plugin used to create minimal clean alert and/or confirmation popup boxes with Confirm and Cancel callbacks on the web app. Inspired by Apple iOS' Alerts View. The goal of this plugin is to bring the native iOS dialog experience to your modern cross-platform web project.

How to use it:

1. Load the jquery.confirm-1.1.css for the basic styling of the dialog boxes.

<link href="jquery.confirm-1.1.css" rel="stylesheet">

2. Load the latest & minified version of jQuery library and the JavaScript jquery.confirm-1.1.js in the page when needed.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery.confirm-1.1.js"></script>

3. Create a basic alert dialog.

$.alert('Alert message');

4. Create a basic confirmation dialog.

$.confirm({
  title:'Confirm Title', 
  content:'Are You Sure?'
});

5. Create an alert dialog with a callback function which will be fired as you click the confirm button.

$.alert({
  buttons: {
    ok: {
      text: 'Okey',
      action: function () {
        // do something
      }
    }
  }
});

6. Create a confirm dialog with callback functions which will be fired as you click the confirm or close button.

$.confirm({
  buttons: {
    ok: {
      text: 'Confirm',
      action: function () {
        // do something
      }
    },
    close: {
      text: 'Close',
      action: function () {
        // do something
      }
    }
  }
});

7. All default plugin options.

title: 'Dialog Title',
content: 'Are you sure to continue?',
buttons: {},
bgOpacity: 0.9,
animation: 'zoom',
closeAnimation: 'scale',
animationSpeed: 400,
animationBounce: 1.2,
boxWidth: '50%',
flag: false,
defaultButtons: {
  ok: {
    text: 'Okey',
      action: function () {
      }
  },
  close: {
    text: 'Cancel',
      action: function () {
      }
  },
},
onContentReady: function () {

},
onOpenBefore: function () {

},
onOpen: function () {

},
onClose: function () {

},
onDestroy: function () {

},
onAction: function () {

}

---

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