iOS-Style Alert And Confirm Dialog Plugin - alert-confirm.js

alert-confirm.js is a lightweight jQuery plugin that helps you create customizable, iOS-style, mobile-friendly alert or confirmation dialog boxes on the webpage. Can be used as an advanced alternative to the native JavaScript popup boxes.

How to use it:

1. To get started, make sure you load the following JS & CSS files correctly in the html page.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="src/alert-confirm.js"></script>
<link rel="stylesheet" href="src/alert-confirm.css">

2. Create an alert dialog using $.alert() function.

$.alert('Alert Message', {
  // options here
});

3. Create a confirmation dialog using $.confirm() function.

$.confirm('Confirm Message', {
  // options here
});

4. You can also create custom alert or confirmation dialog boxes using alertconfirm method.

<div class="ms-alert hidden">
  <div class="ms-alert-body">
    <div class="ms-alert-header">header</div>
    <div class="ms-alert-content">content</div>
    <div class="ms-alert-buttons">
      <div class="ms-alert-button confirm">confirm</div>
      <div class="ms-alert-button cancel">cancel</div>
    </div>
  </div>
</div>

$('.ms-alert').alertconfirm({
  showFunction: function () {
    this.removeClass('hidden')
  },
  hideFunction: function () {
    this.addClass('hidden')
  }
})

$('#trigger-element').on('click', function () {
  $('.ms-alert').alertconfirm('show')
})

5. Default options available.

header: 'Title',
content: ' ',
confirmButtonText: 'Okey',
cancelButtonText: 'Cancel',
confirm: noop, // callback
cancel: noop // callback

6. Events.

• 'show.ms.alert'
• 'shown.ms.alert'
• 'hide.ms.alert'
• 'hidden.ms.alert'
• 'confirm.ms.alert'
• 'cancel.ms.alert'

$(selector).on(eventName)

---

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