Small client-side javascript library that makes managing your modal windows easy.
Features
Browser Compatibility
Getting the Library
How to use
- RFC6265 compliant
- Cross browser (test now)
- Lightweight
- Few versions (jQuery, PrototypeJs, Pure javascript) just now only for jQuery
The following browsers have passed all of the automated Cookies.js tests:
- Chrome
- Firefox (test now)
- Safari (test now)
- Opera (test now)
- Internet Explorer (test now)
jQuery v0.0.1 Minified (~ 2.28 KB)
jQuery v0.0.1 Unminified (~ 10.2 KB)
First release contain only jQuery version, so you must add to your site or web application jQuery library before use it.
Download and add in head section or where you included javascript scripts into your site or web application timo.jquery.js
(later will be added versions for PrototypeJs and pure javascript without any dependencies) by direct links or another comfortable ways for you.
Options for links:
Option | Description |
---|---|
data-timoLIdent | required , unique if you do not use data-timoSelector, and must be the same as a data-timoMIdent of depend modal window |
data-timoEvent | required , any of jQuery .on() event type click , mouseenter etc. |
data-timoPrevent | optional , prevent link action |
data-timoSelector | optional , substitute for data-timoLIdent, any jQuery valid query selector |
Options for modal windows:
Option | Description |
---|---|
data-timoMIdent | required , unique if you used data-timoLIdentr for depend link and must be the same as this param |
.modal-noscroll {
position: fixed;
overflow: hidden;
}
.modal-window {
display: none;
position: fixed;
top: 45%;
left: 50%;
background: #ffffff;
opacity: 0;
width: 500px;
height: 400px;
margin-top: -200px;
margin-left: -250px;
border: 1px solid #000;
z-index: 101;
padding: 25px 35px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.modal-window .modal-close {
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
cursor: pointer;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cG9seWdvbiBmaWxsPSIjMDEwMTAxIiBwb2ludHM9Ijc3LjYsMjEuMSA0OS42LDQ5LjIgMjEuNSwyMS4xIDE5LjYsMjMgNDcuNiw1MS4xIDE5LjYsNzkuMiAyMS41LDgxLjEgNDkuNiw1MyA3Ny42LDgxLjEgNzkuNiw3OS4yICAgNTEuNSw1MS4xIDc5LjYsMjMgIi8+PC9zdmc+);
}
.modal-window .modal-title {
position: relative;
margin-bottom: 40px;
padding-bottom: 15px;
font-family: "MillerBannerSemibold", "Arial", sans-serif;
font-size: 32px;
text-align: center;
letter-spacing: 1px;
color: #000000;
}
.modal-window .modal-subtitle {
margin-bottom: 30px;
font-family: "BrandonMed", "Arial", sans-serif;
font-size: 16px;
line-height: 16px;
text-align: center;
text-transform: uppercase;
color: #000000;
}
.modal-window .modal-content {
font-family: "Georgia", "Arial", sans-serif;
font-size: 14px;
line-height: 20px;
text-align: center;
}
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
cursor: pointer;
z-index: 100;
}
Two links with different params open one modal window
<a href="##" data-timoLIdent="general-ca-hover" data-timoEvent="mouseenter">Open by hover</a>
<div class="modal-window" data-timoMIdent="general-ca-hover">
<div class="modal-close"></div>
<div class="modal-title">Lorem Ipsum title</div>
<div class="modal-subtitle">Lorem Ipsum subtitle</div>
<div class="modal-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<br>
<a href="/" data-timoLIdent="general-ca-click" data-timoEvent="click" data-timoPrevent="true">Open by click</a>
<div class="modal-window" data-timoMIdent="general-ca-click">
<div class="modal-close"></div>
<div class="modal-title">Lorem Ipsum title</div>
<div class="modal-subtitle">Lorem Ipsum subtitle</div>
<div class="modal-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
/**
* Simple initialize without animation
*/
$(document).ready(function(){
timo.initialize({
fadeIn : 500,
fadeOut: 300,
});
});
/**
* Initialize with animation
* You can use empty show{} and hide{} options, jQuery set default values.
*
* Debug = false
*/
$(document).ready(function(){
timo.initialize({
fadeIn : 500,
fadeOut: 300,
animate: {
enabled: true,
show: {
properties : {duration: 200},
options : {opacity: 1}
},
hide: {
properties : {duration: 200},
options : {opacity: 0}
}
}
}, false);
});