iOS-Style Alert And Confirm Dialog Plugin - alert-confirm.js
File Size: | 8.69 KB |
---|---|
Views Total: | 3594 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.