Mobile-first Alert Dialog Plugin with jQuery and CSS3 - Mobile Alert

File Size: 5.76 KB
Views Total: 2441
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Mobile-first Alert Dialog Plugin with jQuery and CSS3 - Mobile Alert

Mobile Alert is an ultra-light jQuery plugin that lets you create responsive, mobile-friendly alert / confirm dialog boxes with CSS3 powered open / close animations.

How to use it:

1. Add the jquery-alert.css into the head section of the web page.

<link href="css/jquery-alert.css" rel="stylesheet">

2. Add jQuery library and the jquery-alert.js at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery-alert.js"></script>

3. Display a basic alert dialog box.

$.hyc.ui.alert('Alert Dialog Box', function () {
  alert('You Clicked OKey');
});

4. Display a basic confirm dialog box.

$.hyc.ui.alert({
  content:'Confirm Message',
  buttons:[{
      name:'Okey',
      id:'confirmBtn',
      color:'#fff',
      bgColor:'#337AB7',
      callback:function(){
          alert('Okey');
      },
      closable:false
  },{
      name:'Cancle',
      id:'cancelBtn',
      color:'#337AB7',
      bdColor:'#337AB7',
      bgColor:'#fff',
      callback:function(){
          this.close();
      },
      closable:false
  }],
  closable:false
});

5. All default options.

content:'This is a dialog box.',
buttons:[{
  name:'Okey',
  id:'confirmBtn',
  color:'#fff',
  bgColor:'#337AB7',
  callback:function(){

  },
  closable:true
}],
closable:false

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