Skip to content

Commit 0b3ba0a

Browse files
peachananrpeachananr
committed
Initial release
1 parent 8c95ee6 commit 0b3ba0a

7 files changed

+2104
-3
lines changed

‎README.md

Lines changed: 160 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,161 @@
1-
adaptive-modal
2-
==============
1+
#Adaptive Modal by Pete R.
2+
Adaptive modal will let you create a modal window that can be morphed from any elements on your website into a beautifully animate modal windows.
33

4-
Create modal windows that can be morphed from anything
4+
5+
Created by [Pete R.](http://www.thepetedesign.com), Founder of [Travelistly](http://www.travelistly.com) and [BucketListly](http://www.bucketlistly.com)
6+
7+
License: [Attribution-ShareAlike 4.0 International](http://creativecommons.org/licenses/by-sa/4.0/deed.en_US)
8+
9+
[![Adaptive Modal](http://www.thepetedesign.com/images/adaptive-modal.jpg "Adaptive Modal")](http://www.thepetedesign.com/demos/adaptive-modal.html)
10+
11+
12+
## Demo
13+
[View demo](http://www.thepetedesign.com/demos/adaptive-modal_demo.html)
14+
15+
## Compatibility
16+
Modern browsers such as Chrome, Firefox, and Safari on both desktop and mobile have been tested. Not tested on IE.
17+
18+
## Basic Usage
19+
To use this plugin, simply include the latest jQuery library (preferably version 2.0.0 or higher) together with `jquery.adaptive-modal.js` and `adaptive-modal.css` into your document's `<head>` follow by an HTML markup as follows:
20+
21+
````html
22+
<body>
23+
..
24+
<a href="#" data-toggle="adaptive-modal" data-title="...">...</a>
25+
..
26+
</body>
27+
28+
````
29+
30+
Surprise, surprise, that's all you have to do. Follow the HTML markup shown above without calling any JS function and the modal will morphed from this link when trigger. The content inside `data-title` will be used on the modal window. The `data-title` also supports HTML tags.
31+
32+
33+
## Show Existing Content
34+
Instead of storing your content inside `data-title`, you can have them separately in another div container and reference the id of that container in the `href` attribute like this:
35+
36+
````html
37+
<body>
38+
..
39+
<a href="#form" data-toggle="adaptive-modal">...</a>
40+
<form id="form">
41+
..
42+
</form>
43+
..
44+
</body>
45+
46+
````
47+
48+
## Show Remote Content
49+
You can utilize the built-in ajax request by simply define the AJAX URL inside `href` attribute and add `data-remote="true"` to the markup:
50+
51+
````html
52+
<body>
53+
..
54+
<a href="http://www.remote-ajax-url.com" data-type=".." data-datatype=".." data-remote="true" data-toggle="adaptive-modal">...</a>
55+
..
56+
</body>
57+
58+
````
59+
60+
You can also define your own ajax type and datatype with data-type and data-datatype attributes respectively.
61+
62+
## Custom Class Names On Each Modal
63+
You can define your own class name in case you want to customize the modal for each link by following the markup below:
64+
65+
````html
66+
<body>
67+
..
68+
<a href="#" data-toggle="adaptive-modal" data-title="..." data-am-custom-class="custom-class-name">...</a>
69+
..
70+
</body>
71+
72+
````
73+
74+
## Custom BG Color On Show
75+
You can define your own background color instead of using the link background color by default by simply adding the data-am-custom-bgcolor attribute to your markup:
76+
77+
````html
78+
<body>
79+
..
80+
<a href="#" data-toggle="adaptive-modal" data-title="..." data-am-custom-bgcolor="#000">...</a>
81+
..
82+
</body>
83+
84+
````
85+
86+
## Via Javascript
87+
You can initiate the function with javascript instead of an HTML markup in case you want to define global options you want to apply to all links.
88+
89+
````javascript
90+
$(".am-remote-link").adaptiveModal({
91+
elementAnimateTime: 100, // Define the animation time for each element to animate when the modal is openned/closed. The option accept milliseconds. The default value is 100.
92+
customBgColor: "#333", // In case the link have no background color to derive from you can set the background color of the modal here. The option accept HEX, RGB, and RGBA The default value is "#333333".
93+
remoteUrl: false, // You can define the remote URL here as well as the markup. The option accept generic URL. The default value is false.
94+
elementAnimateIn: "scaleShow", // Require Animate.css extension: You can define the element inside the modal its own entrance animation by putting the Animate.css class name here. The default value is the built-in scaleShow animation.
95+
elementAnimateOut: "scaleHide", // Require Animate.css extension: You can define the element inside the modal its own exit animation by putting the Animate.css class name here. The default value is the built-in scaleHide animation.
96+
beforeAnimate: function(el, status) {}, // Callback function execute before the animation begins. Parameters available are el, and status which returns the jQuery object and the status of the animation, ie "open" will return when the animation is opening the modal, and vice versa, respectively.
97+
afterAnimate: function(el, status) {}, // Callback function execute after the animation stops. Parameters available are el, and status which returns the jQuery object and the status of the animation, ie "close" will return when the animation is closing the modal, and vice versa, respectively.
98+
99+
// Deafult Ajax Parameters. See here for more info: http://api.jquery.com/jquery.ajax/
100+
type: "GET",
101+
async: true,
102+
complete: function(xhr, text) {},
103+
cache: true,
104+
error: function(xhr, text, e) {},
105+
global: true,
106+
headers: {},
107+
statusCode: {},
108+
success: function(data, text, xhr) {},
109+
dataType: "html"
110+
});
111+
````
112+
113+
## Callbacks
114+
Here are callbacks available for you to play around with:
115+
116+
117+
### beforeAnimate: function(el, status)
118+
This callback function will be called right before the animation starts. Parameters returned are el which returns the jQuery object and status which returns the status of the animation, ie "open" will be returned when the animation is opening the modal, and "close" will be returned when the animation is closing the modal
119+
120+
````javascript
121+
$(".am-remote-link").adaptiveModal({
122+
beforeAnimate: function(el, status) {
123+
...
124+
}
125+
});
126+
````
127+
128+
### afterAnimation: function(el,status)
129+
This callback function will be called right after the animation stops. Parameters returned are el which returns the jQuery object and status which returns the status of the animation, ie "open" will be returned when the animation is opening the modal, and "close" will be returned when the animation is closing the modal
130+
131+
````javascript
132+
$(".am-remote-link").adaptiveModal({
133+
afterAnimate: function(el, status) {
134+
...
135+
}
136+
});
137+
````
138+
139+
## Public Methods
140+
You can call these methods to programtically interact with the plugin:
141+
142+
### $.fn.openModal()
143+
144+
You can open the modal prgrapmatically by calling this function as shown below:
145+
146+
````javascript
147+
$(".am-remote-link").openModal()
148+
````
149+
150+
### $.fn.closeModal()
151+
152+
You can close the modal prgrapmatically by calling this function as shown below:
153+
154+
````javascript
155+
$(".am-remote-link").closeModal()
156+
````
157+
158+
If you want to see more of my plugins, visit [The Pete Design](http://www.thepetedesign.com/#plugins), or follow me on [Twitter](http://www.twitter.com/peachananr) and [Github](http://www.github.com/peachananr).
159+
160+
## Other Resources
161+
- Tutorial (Coming Soon)

0 commit comments

Comments
 (0)