Versatile Modal Popup Plugin For jQuery - lis.modal.js

lis.modal.js is a simple yet robust, multifunctional JQuery modal popup plugin which can be used for notification popups and alert/confirm/prompt dialog boxes.

Features:

• 5 built-in themes: default, info, warning, danger, success.
• Supports AJAX contents.
• Useful callback functions.
• Fancy open/close animations based on CSS3.
• Lots of API.

Dependencies:

• jQuery
• Font Awesome (for icons).
• Animate.css (for extra animations)

How to use it:

1. To use this plugin, first you need to load the following JavaScript and CSS files in the html document.

<link rel="stylesheet" href="animate.min.css">
<link rel="stylesheet" href="font-awesome.min.css">
<link rel="stylesheet" href="lis.modal.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="lis.modal.js"></script>

2. Create basic alerts & notification popups.

lis.modal("info","Info Message");
lis.modal("warning","Warning Message");
lis.modal("danger","Danger Message");
lis.modal("success","Success Message");
lis.modal("default","Default Message");

3. With callback.

lis.modal("danger","Callback Demo",function(){
  lis.modal("info","Callback!");
});

4. Create a complex prompt dialog.

var contentUL = 'Select An Option : <select id="participant">';
    contentUL += '<option value="1">Option 1</option>';
    contentUL += '<option value="2">Option 2</option>';
    contentUL += '<option value="3">Option 3</option>';
    contentUL += '<option value="4">Option 4</option>';
    contentUL += '<option value="5">Option 5</option>';
    contentUL += '<option value="6">Option 6</option>';
    contentUL += '<option value="7">Option 7</option>';
    contentUL += '<option value="8">Option 8</option>';
    contentUL += '<option value="9">Option 9</option>';
    contentUL += '<option value="10">Option 10</option>';
    contentUL += '</select>';

lis.modal("maModal",{
  title : "Select An Option",
  content : contentUL,
  btn : [{
      id : "lis-success-modal",
      content : "Select",
      class : "success",
      ico : "check",
      close : false,
      onClick : function(modal,btn){
          lis.modal("confirm","Are you sure you want to select the option: "+modal.getContent().find("select").val(),function(){
              modal.close();
          });
      }
  },{
      id : "lis-close-modal",
      content : "Cancel",
      class : "danger",
      ico : "times",
      close : false,
      onClick : function(modal,btn){
          lis.modal("confirm","Are You Sure You Want To Cancel?",function(){
              modal.close();
          })
      }
  }],
  type : "info",
  icon : "bars",
  closed : false,
  size : "lg",
  animateIn : "bounceInDown",
})

5. All default configuration options.

title : "Information",
content : "",
btn : [{
  id : "",
  content : "Close",
  class : "danger",
  ico : "times",
  close : true,
  onClick : function(){}
}],
id : "lis-modal",
type : "info",
icon : "info-circle",
onClose : function(){},
onLoad : function(){},
closed : true,
size : "md",
animateIn : "fadeInDown",
animateOut : "fadeOutUp",
keyboard : true,
show:true,
ajax:{
  url :"",
  post:{},
  get:{}
}

6. API methods.

// open
lis.modal(type).open();

// close
lis.modal(type).close();

// add a button
// btn (object) : {id,content,class,ico,close,onClicl}
lis.modal(type).addBtn(btn); 

// get content
lis.modal(type).getContent();

// add a class
lis.modal(type).getDOM().addClass("bounce");

// set new options
lis.setModalOption(options);

---

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