Multi-Purpose Alert, Prompt, Confirm Dialog Alternative

Multipurpose alert, plug-in confirmation, an alternative to the original alert () and confirm () function.

This plug-in is a more beautifully display browser system notification window on screen and display in different browsers.

Basic jQuery must be installed and provide 3 functions (alert, confirm, prompt).

Key Features:

Supports HTML content material.
Custom emphasized textual content.
Custom confirm/cancel buttons.
Confirm and cancel callbacks.
Custom enter types.
Supports jQuery method chaining.

How to make use of it:

1. Add the jQuery.alert.js plugin’s information to the HTML web page.

<link href="jquery.alert.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="jquery.alert.min.js"></script>

2. Create a customized alert dialog field.

$.alert('jquery.alert.js',{
  em:'webcodeflow.com',
  title:'Alert Dialog'
})

3. Create a customized confirm dialog box.

$.confirm('Are You Sure To Delete This Entry?',{
  em:'Emphasized Text',
  title:'Delete!',
  callEvent:function(){
    $.alert('Deleted!')
  },
  cancelEvent:function(){
    $.alert('Canceled')
  },
  cancelButton:'No!'
})

4. Create a customized immediate dialog field.

$.prompt('Try To Type 1234',{
  title:'Login Form',
  callEvent:function(val){
    if(val==1234) $.alert('Invalid Password'); 
    else $.alert('Logged In');
  },
  input:'password',
  confirmButton:'Log In'
})

5. The plugin additionally helps jQuery method chaining.

$('.colorChange-btn').click(function() {
  $("#item-box").stop().animate(
    {"margin-left":"500px"},1000
  ).animate(
    {"margin-left":"0"},300
  ).delay(300).alert('Another Dialog',
  {
    callEvent:function(){
      $("#item-box").stop().animate(
        {"margin-left":"500px"},1000
          ).animate(
            {"margin-left":"0"},300
          )
      }
  });
})

6. All default configurations.

{
  // dialog title
  title:'Title',
  // emphasized Text
  em:'',
  // fired when you click the confirm button
  callEvent:null,
  // fired when you click the cancel button
  cancelEvent:null,
  // custom button text
  confirmButton:'Okay',
  cancelButton:'Cancel',
  // input type
  input:'text',
  // input value
  value:null
}

Beautiful Alert/Prompt/Confirm Dialog, Minimal jQuery Alert and Confirm, Simple and beautiful JavaScript alert