2.1.4, 2.0.3, 1.11.3, 1.10.2, 1.9.1, 1.8.3, 1.7.2, 1.6.4

https://github.com/kkamkou/jqFenster/archive/1.3.1.zip

<link rel="stylesheet" href="production/jquery.fenster.css" type="text/css" media="screen, projection" />

<script type="text/javascript" src="production/jquery.fenster.js"></script>

<div id="target" class="jqFensterModal"> <div class="jqFensterModalContent">Content</div> <a href="#" class="jqFensterClose jqFensterModalClose">×</a> </div>

$.extend($.jqFensterOptions, { noOverlay: false, // disable jqEbony plugin animationSpeed: 0, // in ms, for example: 200, 400 or 800 callbackOpen: null, // open callbackm function (ref) {} callbackClose: null, // close callback function (ref) {} template: null, // template for the engine (see: jquery.fenster-helper-template-table.js) width: true // Disable it if you resize the window by yourown or specify the value(px, em etc.) });

$.extend($.jqEbonyOptions, { opacity: 0.7, zIndex: 99999, escapeCloses: true, // enable escape button clickCloses: true, // the left mouse click will close the modal animationSpeed: 0, // in ms, for example: 200, 400 or 800 color: [0, 0, 0] // rgb, example: 255, 255, 255 is white });

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

<a href="#" data-selector="#target" class="jqFenster">Simple link</a>

<a href="#" data-selector="#targetSecond" data-options="{animationSpeed: 400}" class="jqFenster">With animation</a>

<a href="#" data-selector="#targetSecond" data-options="{animationSpeed: 0, noOverlay: true}" class="jqFenster">Without overlay and animation</a>

<a href="#" data-selector="#targetSecond" data-options='{callbackOpen: "myOpen", callbackClose: "myClose"}' class="jqFenster">Callback</a>

<a href="#" data-selector="#targetThird" class="jqFenster">Popup in Popup</a>

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

// Each call to the api creates a new hidden "a" tag with "jqFenster" class to store an instance. // To remove this tag, you have to call the ".destroy()" method. // Also, you can check it with ".isDestroyable()" call.

// static, by jQuery object var modal = $('#target').fenster(); // dynamic, by selector var modal = $.fenster('#target'); // dynamic, just options var modal = $.fenster({selector: '#target'}); // show the modal modal.open(); // cleanup modal.destroy() // or modal.close().destroy();

// #1 example with an in-dom element var modal, $link = $('#simplelink'), metadata = { href: 'remote.html', callbackOpen: "myOpen", options: {animationSpeed: 300} }; modal = $.fensterFinder($link.click()) // it is possible to use {selector: '#targetSecond'} INSTEAD OF href .setOptions(metadata) .reInit(); // later modal.destroy(); // #2 example with a remote file // this file $.fenster({href: 'remote-reinit.html'}).open(); // remote-reinit.html $('#reinitAnother').bind('click', function () { // you can use the current element (this) $.fensterFinder(this).setOptions(...).reInit(); return false; });