Minimal Themeable jQuery Modal Plugin - Adex Modal

File Size: 8.34 KB
Views Total: 900
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Themeable jQuery Modal Plugin - Adex Modal

Adex Modal is a lightweight and CSS-less jQuery modal plugin which helps you create various types of modal windows with only one JS call. It comes with 4 themes (default, warning, error and success) and you can easily create your own styles.

How to use it:

1. Just include the adexmodal.js file after the "jQuery library" as shown in the code snippet below and you're ready to go.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="adexmodal.js"></script>

2. Call the function on the trigger element and specify the content you want to display in the modal window.

$('.trigger').adexmodal({
  content : 'Modal Content',
});

3. Change the default theme of the modal window.

$('.trigger').adexmodal({
  content : 'Modal Content',
  mtype :'error', // default,error,success,warning
});

4. More customization options with default values.

$('.trigger').adexmodal({

  //If the header criteria is missing
  //or has some typo mistakes in the 
  //provided script it will set the 
  //header of the modal to blank. 
  header : '',

  //The default type of the modal plugin.
  //If the user forget to mention the type
  //of the modal it is set to default.
  //There are four types of the modal 
  // 1) default, 2) error, 3)success 4)warning
  //The above typo is incase sensetive. 
  mtype :'default',

  //The default beckground for the modal
  //plugin if someone has mistakenly put
  //the wrong background code. The
  //backgroung can be also be recognised in 
  //the rgb(*,*,*) format. Puting the opacity
  //in the rgba format will put the same opacity
  //as a background cancelling your opacity
  //property provided below in the plugin.
  background : '#000',

  //The opacity is placed in the
  //percentile format, rangingfrom 0 to 100.
  //The plugin further convert this into
  //required percentile opacity.
  bg_opacity : '60',  
  
  //default content which is going to
  //be display in the modal. The 
  //default content is set to blank. 
  content : '', 
  closebtn : '.close',
  speed: 160,
  
});

About Author:

Author: Abhishek Bagul

Website: http://abhibagul.github.io/Adex-Modal-Plugin/


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