| 1. Styles (HEAD section)
<link rel="stylesheet" href="/production/jquery.fenster.css" type="text/css" media="screen, projection" /> |
| 2. Scripts (BODY section)
<script type="text/javascript" src="/production/jquery.fenster.js"></script> |
| 3. Default markup
<div class="jqFensterModal">
<div class="jqFensterModalContent">Content</div>
<a href="#" class="jqFensterClose jqFensterModalClose">×</a>
</div> |
| 4. Advanced example (Adds the close button to opened modal)
$.extend($.jqFensterOptions, {
'callbackOpen': function (ref) {
setTimeout(function () {
$.fensterFinder(ref).getHolder()
.find('div.jqFensterModal').append(
$('<a href="#"/>')
.addClass('jqFensterModalClose jqFensterClose')
.bind('click', function () {
$.fensterFinder(this).close();
return false;
})
);
}, 100);
}
}); |
| 1. Simple link
<a href="#" data-selector="#target" class="jqFenster">Simple link</a> |
| 2. With animation
<a href="#" data-selector="#targetSecond" data-options="{animationSpeed: 400}" class="jqFenster">With animation</a> |
| 3. Without overlay and animation (appends to the end of this page)
<a href="#" data-selector="#targetSecond" data-options="{animationSpeed: 0, noOverlay: true}" class="jqFenster">Without overlay and animation</a> |
| 4. Callback
<a href="#" data-selector="#targetSecond" data-options='{callbackOpen: "myOpen", callbackClose: "myClose"}' class="jqFenster">Callback</a> |
| 5. Popup in Popup
<a href="#" data-selector="#targetThird" class="jqFenster">Popup in Popup</a> |
| 6. Remote one
<a href="remote.html" class="jqFenster">Remote one</a> |
| 7.
<button data-selector="#targetSecond" class="jqFenster">I'm button</button> |
| 8.
<button id="callbackOpenChanger">change the callbackOpen option globally</button>
$('#callbackOpenChanger').bind('click', function () {
// global option for the jqFenster
$.jqFensterOptions.callbackOpen = function() {
alert('You have changed it globally');
};
// opens modal using object
$.fenster('#target').open();
return false;
}); |
| 1.
// static, by jQuery object
$('#targetJsApiFirst').fenster().open();
// dynamic, by selector
$.fenster('#target').open();
// dynamic, just options
$.fenster({'selector': '#target}).open(); |
| 2.
// this file
$.fenster({'href': 'remote-reinit.html'}).open();
// remote-reinit.html
$('#reinitAnother').bind('click', function () {
$.fensterFinder(this).setOptions({
'href': 'remote.html',
'options': {
callbackOpen: "myOpen",
animationSpeed: 300
}
}).reInit();
return false;
}); |