Lightweight Modal Framework


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); } });

DOM Helpers (jquery.fenster.js)

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>
<button data-selector="#targetSecond" class="jqFenster">I'm button</button>
<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; });

API (jquery.fenster.js)

// static, by jQuery object $('#targetJsApiFirst').fenster().open(); // dynamic, by selector $.fenster('#target').open(); // dynamic, just options $.fenster({'selector': '#target}).open();
// 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; });

Tests (QUnit)

Hello, I'm the #target

Close me please.
Hello, I'm the #targetSecond,
Hello, I'm the #targetThird
[Another] [CloseMe]