<button class="alert" type="button">Alert</button>

<button class="confirm" type="button">Confirm</button>

<button class="prompt" type="button">Prompt</button>

<hr>

<button class="alert-vel" type="button">Alert (custom animation)</button>

<button class="prompt-login">Prompt (login)</button>

<hr>

<p>
  <strong>Tip:</strong>
  Open the dev console to see logging.
</p>
html {
  padding: 20px;
  font-family: sans-serif;
  font-size: 15px;
}

hr {
  border: none;
  border-top: solid 1px #eee;
  margin: 40px 0;
}

button {
  font-size: inherit;
  border: none;
  background: #09d;
  color: white;
  padding: 10px 20px;
}
$(function() {
  
  // Standard alert
  $('.alert').on('click', function() {
    $.alertable.alert('Howdy!').always(function() {
      console.log('Alert dismissed');
    });
  });
  
  // Standard confirm
  $('.confirm').on('click', function() {
    $.alertable.confirm('You sure?').then(function() {
      console.log('Confirmation submitted');
    }, function() {
      console.log('Confirmation canceled');      
    });
  });
  
  // Standard prompt
  $('.prompt').on('click', function() {
    $.alertable.prompt('How many?').then(function(data) {
      console.log('Prompt submitted', data);
    }, function() {
      console.log('Prompt canceled');      
    });
  });

  // Standard alert with custom show/hide functions (uses velocity.js)
  $('.alert-vel').on('click', function() {
    $.alertable.alert('Howdy!', {
      show: function() {
        $(this.overlay).velocity('transition.fadeIn', 300);        
        $(this.modal).velocity('transition.shrinkIn', 300);
      },
      hide: function() {
        $(this.overlay).velocity('transition.fadeOut', 300);
        $(this.modal).velocity('transition.shrinkOut', 300);
      } 
    });
  });
  
  // Prompt (login)
  $('.prompt-login').on('click', function() {
    $.alertable.prompt('Login to continue', {
      prompt:
      '<input type="text" class="alertable-input" name="username" placeholder="Username">' +
      '<input type="password" class="alertable-input" name="password" placeholder="Password">' +
      '<label>' +
      '<input type="checkbox" name="remember" value="true"> ' +
      'Remember me' +
      '</label>'
    }).then(function(data) {
      console.log('Login submitted', data);
    }, function() {
      console.log('Login canceled');
    });
  });

});

External CSS

  1. https://cdn.rawgit.com/claviska/jquery-alertable/master/jquery.alertable.css

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js
  4. https://rawgit.com/claviska/jquery-alertable/master/jquery.alertable.min.js