Minimal jQuery Modal Window with CSS3 Animations - asModal

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.