Minimal jQuery Modal Window with CSS3 Animations - asModal

Minimal jQuery Modal Window with CSS3 Animations - asModal
File Size: 274 KB
Views Total: 1643
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

asModal is a jQuery plugin which allows you to embed any Html elements or Ajax content in a simple responsive modal window.

Basic Usage:

1. Include the jQuery asModal plugin's stylesheet in the head section. Override or change the CSS styles whatever you want.

<link rel="stylesheet" href="css/modal.css">

2. Include the required animate.css for modal animations.

<link rel="stylesheet" href="css/animate.css">

3. Include jQuery library and the JQuery asModal plugin's script in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="path/to/jquery-asModal.js"></script>

4. Wrap your modal content in a container.

<div class="demo">
  Your content goes here
</div>

5. Create an element to toggle the modal.

<button href=".demo">demo</button>

6. Initialize the plugin with default options.

$('button').asModal();

7. Options and defaults.

  • namespace: 'modal': String: Prefix string attached to the class of every element generated by the plugin
  • skin: null: set plugin skin
  • content: null: Set the URL, ID or Class.
  • overlay: true: Show the overlay.
  • closeElement: null: Element ID or Class to close the modal
  • effect: 'fadeScale': fadein | slide | newspaper | fall 
  • overlaySpeed: 200: Sets the speed of the overlay, in milliseconds
  • effectFallback: 'fade': set default jquery animate when css3 animation doesn't support
  • focus: true: set focus to form element in content
  • errorText: 'sorry, cant find the file !': set ajax error text
  • loadingContent: 'loading...': set loading content
  • closeByEscape: true: Allow the user to close the modal by pressing 'ESC'.
  • closeByOverlayClick: true: Allow the user to close the modal by clicking the overlay. 
  • width: null: Set a fixed total width.
  • hieght: null: Set a fixed total height.
  • onOpen: null: Callback: function() - Fires when the modal open
  • onClose: null: Callback: function() - Fires when the modal close
  • onComplete: null: Callback: function() - Fires when the effect end

Change log:

2017-09-11

  • v0.3.2

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